Allow to disable flip behaviour on Dropdown + documentation
This commit is contained in:
parent
65d0d9831a
commit
4f882a840c
|
@ -17,6 +17,7 @@ Dropdowns are toggleable, contextual overlays for displaying lists of links and
|
||||||
Things to know when using the popover plugin:
|
Things to know when using the popover plugin:
|
||||||
|
|
||||||
- Dropdown rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.8.2/umd/popper.min.js) before bootstrap.js in order for dropdowns to work!
|
- Dropdown rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.8.2/umd/popper.min.js) before bootstrap.js in order for dropdowns to work!
|
||||||
|
- Popper.js handle natively the flip of Dropdown when it's outside the viewport, if you want to disable that's behavior use `flip` attribute
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
|
@ -551,7 +552,6 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||||
<td>'bottom'</td>
|
<td>'bottom'</td>
|
||||||
<td>
|
<td>
|
||||||
<p>How to position the popover - top | bottom.</p>
|
<p>How to position the popover - top | bottom.</p>
|
||||||
<p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the dropdown instance.</p>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -560,6 +560,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||||
<td>0</td>
|
<td>0</td>
|
||||||
<td>Offset of the dropdown relative to its target. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..offset.offset">offset docs</a>.</td>
|
<td>Offset of the dropdown relative to its target. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..offset.offset">offset docs</a>.</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>flip</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>true</td>
|
||||||
|
<td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.enabled">flip docs</a>.</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
|
@ -71,12 +71,14 @@ const Dropdown = (($) => {
|
||||||
|
|
||||||
const Default = {
|
const Default = {
|
||||||
placement : AttachmentMap.BOTTOM,
|
placement : AttachmentMap.BOTTOM,
|
||||||
offset : 0
|
offset : 0,
|
||||||
|
flip : true
|
||||||
}
|
}
|
||||||
|
|
||||||
const DefaultType = {
|
const DefaultType = {
|
||||||
placement : 'string',
|
placement : 'string',
|
||||||
offset : '(number|string)'
|
offset : '(number|string)',
|
||||||
|
flip : 'boolean'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -153,6 +155,9 @@ const Dropdown = (($) => {
|
||||||
modifiers : {
|
modifiers : {
|
||||||
offset : {
|
offset : {
|
||||||
offset : context._config.offset
|
offset : context._config.offset
|
||||||
|
},
|
||||||
|
flip : {
|
||||||
|
enabled : context._config.flip
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -201,6 +206,11 @@ const Dropdown = (($) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
_getConfig(config) {
|
_getConfig(config) {
|
||||||
|
const elementData = $(this._element).data()
|
||||||
|
if (elementData.placement !== undefined) {
|
||||||
|
elementData.placement = AttachmentMap[elementData.placement.toUpperCase()]
|
||||||
|
}
|
||||||
|
|
||||||
config = $.extend(
|
config = $.extend(
|
||||||
{},
|
{},
|
||||||
this.constructor.Default,
|
this.constructor.Default,
|
||||||
|
|
Loading…
Reference in New Issue