Skip to content
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

Use popper to align dropdown menu instead of using css with important #22640

Merged
merged 2 commits into from
May 17, 2017
Merged

Use popper to align dropdown menu instead of using css with important #22640

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ade9062
Use popper to align dropdown menu instead of using css with important
Johann-S May 17, 2017
f29882d
Merge branch 'v4-dev' into v4-dropdown-menu-align
Johann-S May 17, 2017
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
31 changes: 28 additions & 3 deletions js/src/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,11 @@ const Dropdown = (($) => {
}

const ClassName = {
DISABLED : 'disabled',
SHOW : 'show'
DISABLED : 'disabled',
SHOW : 'show',
DROPUP : 'dropup',
MENURIGHT : 'dropdown-menu-right',
MENULEFT : 'dropdown-menu-left'
}

const Selector = {
Expand Down Expand Up @@ -142,7 +145,7 @@ const Dropdown = (($) => {
}

// Handle dropup
const dropdownPlacement = $(this._element).parent().hasClass('dropup') ? AttachmentMap.TOP : this._config.placement
const dropdownPlacement = $(this._element).parent().hasClass(ClassName.DROPUP) ? AttachmentMap.TOP : this._config.placement
this._popper = new Popper(this._element, this._menu, {
placement : dropdownPlacement,
modifiers : {
Expand All @@ -151,6 +154,11 @@ const Dropdown = (($) => {
},
flip : {
enabled : this._config.flip
},
beforeApplyStyle: {
order: 899, // 900 is the order of applyStyle
enabled: true,
fn: this._beforePopperApplyStyle
}
}
})
Expand Down Expand Up @@ -230,6 +238,23 @@ const Dropdown = (($) => {
return this._menu
}

_beforePopperApplyStyle(data) {
if ($(data.instance.popper).hasClass(ClassName.MENURIGHT)) {
data.styles = {
right: 0,
left: 'auto'
}
}

if ($(data.instance.popper).hasClass(ClassName.MENULEFT)) {
data.styles = {
right: 'auto',
left: 0
}
}
return data
}

// static

static _jQueryInterface(config) {
Expand Down
48 changes: 37 additions & 11 deletions js/tests/visual/dropdown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,19 +59,45 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
</li>
</ul>

<!-- Default dropup button -->
<div class="btn-group dropup" style="margin-top: 60px;">
<button type="button" class="btn btn-secondary">Dropup</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="row">
<div class="col-sm-12 mt-4">
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">Dropup</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This dropdown's menu is right-aligned
</button>
<div class="dropdown-menu dropdown-menu-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>

<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This dropdown's menu is left-aligned
</button>
<div class="dropdown-menu dropdown-menu-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>
</div>
</div>
</div>
</div>

<script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../docs/assets/js/vendor/popper.min.js"></script>
Expand Down
14 changes: 0 additions & 14 deletions scss/_dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,20 +108,6 @@
}
}

// Menu positioning
//
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
right: 0;
left: auto !important; // Reset the default from `.dropdown-menu`
}

.dropdown-menu-left {
right: auto !important;
left: 0;
}

.dropdown-menu.show {
display: block;
}
Expand Down