Add dropdown responsive alignment (#26255)
This commit is contained in:
parent
6bae9ef786
commit
becb6ce346
|
@ -33,9 +33,26 @@
|
||||||
@include box-shadow($dropdown-box-shadow);
|
@include box-shadow($dropdown-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu-right {
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
right: 0;
|
@include media-breakpoint-up($breakpoint) {
|
||||||
left: auto;
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
|
.dropdown-menu#{$infix}-right {
|
||||||
|
right: 0;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
|
@include media-breakpoint-up($breakpoint) {
|
||||||
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
|
.dropdown-menu#{$infix}-left {
|
||||||
|
right: auto;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||||
|
|
|
@ -616,6 +616,44 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
{% include example.html content=example %}
|
{% include example.html content=example %}
|
||||||
|
|
||||||
|
### Responsive alignment
|
||||||
|
|
||||||
|
If you want to use responsive alignment, disable dynamic positioning by adding the `data-display="static"` attribute and use the responsive variation classes.
|
||||||
|
|
||||||
|
To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl}-right`.
|
||||||
|
|
||||||
|
{% capture example %}
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Left-aligned but right aligned when large screen
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu dropdown-menu-lg-right">
|
||||||
|
<button class="dropdown-item" type="button">Action</button>
|
||||||
|
<button class="dropdown-item" type="button">Another action</button>
|
||||||
|
<button class="dropdown-item" type="button">Something else here</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
{% include example.html content=example %}
|
||||||
|
|
||||||
|
To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-right` and `.dropdown-menu{-sm|-md|-lg|-xl}-left`.
|
||||||
|
|
||||||
|
{% capture example %}
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Right-aligned but left aligned when large screen
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
|
||||||
|
<button class="dropdown-item" type="button">Action</button>
|
||||||
|
<button class="dropdown-item" type="button">Another action</button>
|
||||||
|
<button class="dropdown-item" type="button">Something else here</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
{% include example.html content=example %}
|
||||||
|
|
||||||
|
Note that you don't need to add a `data-display="static"` attribute to dropdown buttons in navbars, since Popper.js isn't used in navbars.
|
||||||
|
|
||||||
## Menu content
|
## Menu content
|
||||||
|
|
||||||
### Headers
|
### Headers
|
||||||
|
|
Loading…
Reference in New Issue