Skip to content

Add dropdown responsive alignment #26255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
XhmikosR merged 6 commits into from
Oct 21, 2018
Merged

Add dropdown responsive alignment #26255

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7a697f7
Add dropdown responsive alignment
ysds Apr 11, 2018
25b24a2
Update dropdowns.md
XhmikosR Apr 11, 2018
f349adc
Fix incorrect class
ysds Apr 16, 2018
26bb189
Merge remote-tracking branch 'upstream/v4-dev' into responsive-dropdo…
ysds Jul 24, 2018
d11fdaf
Merge branch 'v4-dev' into responsive-dropdown-alignment
XhmikosR Oct 20, 2018
c8096e3
Merge branch 'v4-dev' into responsive-dropdown-alignment
XhmikosR Oct 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions docs/4.1/components/dropdowns.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -616,6 +616,44 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
{% endcapture %}
{% 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

### Headers
Expand Down
23 changes: 20 additions & 3 deletions scss/_dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,26 @@
@include box-shadow($dropdown-box-shadow);
}

.dropdown-menu-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}-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)
Expand Down