Fix multiple dropdowns in input group #28152
Conversation
| .btn { | ||
| &:not(:first-child) { | ||
| margin-left: -$input-border-width; | ||
| } |
There was a problem hiding this comment.
I could also have added .dropdown-menu here, but figured out this would save us a lot of selectors.
| @@ -179,6 +179,7 @@ | |||
| .input-group > .input-group-append:not(:last-child) > .btn, | |||
| .input-group > .input-group-append:not(:last-child) > .input-group-text, | |||
| .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), | |||
| .input-group > .input-group-append:last-child > .dropdown-toggle:nth-last-child(n + 3), | |||
There was a problem hiding this comment.
(n + 3) stands for third last or more. This way the radius is removed only if the .dropdown-toggle is not the second last element ( and .dropdown-menu is the last). Couldn't combine this with L181, because complex selectors for :not() are not well supported.
There was a problem hiding this comment.
This feels like it'd break very easily—folks introduce custom markup in all the places we wouldn't expect. 😬
| <div class="input-group"> | ||
| <input type="text" class="form-control" aria-label="Text input with dropdown button"> | ||
| <div class="input-group-append"> | ||
| <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button> | ||
| <div class="dropdown-menu"> | ||
| <div class="dropdown-menu dropdown-menu-right"> |
There was a problem hiding this comment.
I've added this because it just looks nicer if the dropdowns are aligned with the end of the button
|
Hi @MartijnCuppens #28150 would be not a CSS issue, because it has already been fixed in #25076. Please see #28150 (comment). |
Fixes #28150
Demo: https://deploy-preview-28152--twbs-bootstrap4.netlify.com/docs/4.2/components/input-group/#buttons-with-dropdowns