BNavItemDropdown is missing boundary option/prop

[petrachemarin]

Hi,

I am using b-nav-item-dropdown component for a sidebar and I need to make the sidebar scrollable, unfortunately the boundary option it is not present for this component.

1. Can popper-opts be used to force the boundary to be sent? In theory b-nav-item-dropdown is extending b-dropdown and the functionality should be available.

2. If 1 it is not possible, using b-dropdown is there any way to generate the parent element as a li and not as a div? For example there is an option to set the toggle tag element.

Thank you.

[tmorehouse]

Popper.js is not used for positioning of <b-nav-item-dropdown> menus (unlike regular <b-dropdown>), hence there is no boundary property or options.

[petrachemarin]

It would have been nice to have this feature since there are scenarios where it can be applied and it can be extended from b-dropdown.

[tmorehouse]

The problem is when it comes to responsive navbars that are collapsed... when the dropdown menu becomes inline and not floating. This is the same behaviour as native Bootstrap v4.x https://github.com/twbs/bootstrap/blob/0d1aee6a2fecc865066c90e85422e192ca69ba34/js/src/dropdown.js#L156-L187

[petrachemarin]

@tmorehouse
Cool, thank you for explanations & for opening a pull request.

[tmorehouse]

Note in the PR, the boundary only applies when <b-nav-item-dropdown> is not a descendant of <b-navbar>

[petrachemarin]

Note in the PR, the boundary only applies when <b-nav-item-dropdown> is not a descendant of <b-navbar>

It might be enough at least for the custom implementation that we have on the app and it would be a step forward for sure to achieve the complete support of boundary when twitter bootstrap will support it too.

[tmorehouse]

You might be able to get around the boundary issue by specifying class position-static (or style position: static) to a parent container around the inner b-nav or b-navbar. (you might need to experiment a bit)

[petrachemarin]

You might be able to get around the boundary issue by specifying class position-static (or style position: static) to a parent container around the inner b-nav or b-navbar. (you might need to experiment a bit)

Well....I've tried this already and everything works ok with position-static on the parent container but it's not enough because boundary and popper also affects the way the dropdown it is positionated and it's calculating real time where it should be placed on the viewport with transform: translate3d and coordinates.

So I am thinking that if the dropdown will be generated with boundary/popper and will be a list element I could just add a parent(static html element instead of b-navbar component) that will behave(have the same classes structure) as b-navbar.