From d723decd6acd32c47835e879da464304b5e5a2a7 Mon Sep 17 00:00:00 2001 From: 719media <719media@users.noreply.github.com> Date: Sat, 6 Jan 2018 10:10:03 -0800 Subject: [PATCH 1/8] Update dropdown.js --- js/src/dropdown.js | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/js/src/dropdown.js b/js/src/dropdown.js index a2505c0b5484..bcc4328dbd4c 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -76,13 +76,15 @@ const Dropdown = (($) => { const Default = { offset : 0, flip : true, - boundary : 'scrollParent' + boundary : 'scrollParent', + reference : 'toggle' } const DefaultType = { offset : '(number|string|function)', flip : 'boolean', - boundary : '(string|element)' + boundary : '(string|element)', + reference : '(string|element)' } @@ -155,20 +157,26 @@ const Dropdown = (($) => { if (typeof Popper === 'undefined') { throw new Error('Bootstrap dropdown require Popper.js (https://popper.js.org)') } - let element = this._element - // for dropup with alignment we use the parent as popper container - if ($(parent).hasClass(ClassName.DROPUP)) { - if ($(this._menu).hasClass(ClassName.MENULEFT) || $(this._menu).hasClass(ClassName.MENURIGHT)) { - element = parent + let referenceElement = this._element + + if (this._config.reference === 'parent') { + referenceElement = parent + } else if (Util.isElement(this._config.reference)) { + referenceElement = this._config.reference; + + //check if it's jQuery element + if (typeof this._config.reference.jquery !== 'undefined') { + referenceElement = this._config.reference[0]; } } + // If boundary is not `scrollParent`, then set position to `static` // to allow the menu to "escape" the scroll parent's boundaries // https://github.com/twbs/bootstrap/issues/24251 if (this._config.boundary !== 'scrollParent') { $(parent).addClass(ClassName.POSITION_STATIC) } - this._popper = new Popper(element, this._menu, this._getPopperConfig()) + this._popper = new Popper(referenceElement, this._menu, this._getPopperConfig()) } From 726a5075e195146b73ceb4b35f50df8ccd85d779 Mon Sep 17 00:00:00 2001 From: 719media <719media@users.noreply.github.com> Date: Sat, 6 Jan 2018 10:15:33 -0800 Subject: [PATCH 2/8] Update dropdowns.md --- docs/4.0/components/dropdowns.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index 4bec2986aca4..0e91c113c217 100644 --- a/docs/4.0/components/dropdowns.md +++ b/docs/4.0/components/dropdowns.md @@ -741,6 +741,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap 'scrollParent' Overflow constraint boundary of the dropdown menu. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs. + + reference + string | element + 'toggle' + Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', or an HTMLElement reference. For more information refer to Popper.js's referenceObject docs. + From 5c1e0eac426c134a974621b93895b59988ea7f24 Mon Sep 17 00:00:00 2001 From: 719media <719media@users.noreply.github.com> Date: Sat, 6 Jan 2018 10:19:39 -0800 Subject: [PATCH 3/8] Update dropdown.js --- js/src/dropdown.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/src/dropdown.js b/js/src/dropdown.js index bcc4328dbd4c..4e32d5e23059 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -162,11 +162,11 @@ const Dropdown = (($) => { if (this._config.reference === 'parent') { referenceElement = parent } else if (Util.isElement(this._config.reference)) { - referenceElement = this._config.reference; + referenceElement = this._config.reference //check if it's jQuery element if (typeof this._config.reference.jquery !== 'undefined') { - referenceElement = this._config.reference[0]; + referenceElement = this._config.reference[0] } } From 23e5bdf508de346aef70f783c1930c925aae8520 Mon Sep 17 00:00:00 2001 From: 719media <719media@users.noreply.github.com> Date: Sat, 6 Jan 2018 18:14:34 -0800 Subject: [PATCH 4/8] Update dropdown.js --- js/src/dropdown.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 4e32d5e23059..d0677c6b8242 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -158,18 +158,18 @@ const Dropdown = (($) => { throw new Error('Bootstrap dropdown require Popper.js (https://popper.js.org)') } let referenceElement = this._element - + if (this._config.reference === 'parent') { referenceElement = parent } else if (Util.isElement(this._config.reference)) { referenceElement = this._config.reference - - //check if it's jQuery element + + // Check if it's jQuery element if (typeof this._config.reference.jquery !== 'undefined') { referenceElement = this._config.reference[0] } } - + // If boundary is not `scrollParent`, then set position to `static` // to allow the menu to "escape" the scroll parent's boundaries // https://github.com/twbs/bootstrap/issues/24251 From 012762af2ba5306b285631f3afd884365cafd5fd Mon Sep 17 00:00:00 2001 From: 719media <719media@users.noreply.github.com> Date: Wed, 10 Jan 2018 11:51:38 -0800 Subject: [PATCH 5/8] Update dropdowns.md --- docs/4.0/components/dropdowns.md | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index 0e91c113c217..4094b58e442f 100644 --- a/docs/4.0/components/dropdowns.md +++ b/docs/4.0/components/dropdowns.md @@ -672,6 +672,38 @@ Add `.disabled` to items in the dropdown to **style them as disabled**. {% endexample %} +## Dropdown options + +Use `data-offset` or `data-reference` to change the location of the dropdown. + +{% example html %} +
+
+ +
+ + + +
+
+
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+{% endexample %} + ## Usage Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item. The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. From 88e7a69e6ee68ce1146e0c0bd65aaa4cf5027176 Mon Sep 17 00:00:00 2001 From: 719media <719media@users.noreply.github.com> Date: Thu, 11 Jan 2018 08:50:34 -0800 Subject: [PATCH 6/8] Update dropdowns.md --- docs/4.0/components/dropdowns.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index 4094b58e442f..11567ed21555 100644 --- a/docs/4.0/components/dropdowns.md +++ b/docs/4.0/components/dropdowns.md @@ -679,21 +679,21 @@ Use `data-offset` or `data-reference` to change the location of the dropdown. {% example html %}
- -
- - - +
+ Action + Another action + Something else here
- -
+
Action Another action Something else here From 5216a3cb8526e591e8e0eaecbba621516906b145 Mon Sep 17 00:00:00 2001 From: 719media <719media@users.noreply.github.com> Date: Thu, 11 Jan 2018 08:56:05 -0800 Subject: [PATCH 7/8] Update dropdown.js --- js/src/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 53547413cd95..5f168ce5325b 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -152,7 +152,7 @@ const Dropdown = (($) => { if (typeof Popper === 'undefined') { throw new TypeError('Bootstrap dropdown require Popper.js (https://popper.js.org)') } - + let referenceElement = this._element if (this._config.reference === 'parent') { From 93b11846c47fc6037f89d925675682089c77b288 Mon Sep 17 00:00:00 2001 From: 719media <719media@users.noreply.github.com> Date: Thu, 11 Jan 2018 09:04:01 -0800 Subject: [PATCH 8/8] Update dropdown.html --- js/tests/visual/dropdown.html | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html index b2e588677cd4..27a888f04048 100644 --- a/js/tests/visual/dropdown.html +++ b/js/tests/visual/dropdown.html @@ -161,8 +161,34 @@

Dropdown Bootstrap Visual Test

+
+
+
+
+ +
+ Action + Another action + Something else here +
+
+
+
+
+ + +
+ Action + Another action + Something else here +
+
+
+