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.

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

BNavItemDropdown is missing boundary option/prop #4684

Closed

Comments

@petrachemarin
Copy link

@petrachemarin petrachemarin commented Jan 27, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Jan 27, 2020

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
Copy link
Author

@petrachemarin petrachemarin commented Jan 28, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Jan 28, 2020

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
Copy link
Author

@petrachemarin petrachemarin commented Jan 28, 2020

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

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Jan 28, 2020

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

@petrachemarin
Copy link
Author

@petrachemarin petrachemarin commented Jan 28, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Jan 28, 2020

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
Copy link
Author

@petrachemarin petrachemarin commented Jan 28, 2020

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.

jacobmllr95 added a commit that referenced this issue Jan 29, 2020
…n `b-navbar` (closes #4684) (#4691)

* feat(b-nav-item-dropdown): add boundary prop (used when not in b-navbar)

* Update dropdown.js

* Update dropdown.js

* Update package.json

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment