From becb6ce346a69fccccb1828e289ae4e4d3af8535 Mon Sep 17 00:00:00 2001
From: ysds <fellows3@gmail.com>
Date: Sun, 21 Oct 2018 17:01:22 +0900
Subject: [PATCH] Add dropdown responsive alignment (#26255)
---
scss/_dropdown.scss | 23 +++++++++++++---
site/docs/4.1/components/dropdowns.md | 38 +++++++++++++++++++++++++++
2 files changed, 58 insertions(+), 3 deletions(-)
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index b6a4089d4b..3ec5a34e4c 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -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)
diff --git a/site/docs/4.1/components/dropdowns.md b/site/docs/4.1/components/dropdowns.md
index ab61390d4e..5526313375 100644
--- a/site/docs/4.1/components/dropdowns.md
+++ b/site/docs/4.1/components/dropdowns.md
@@ -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
--
GitLab