Open 719media opened 3 years ago
PR in #34120
I fully agree with this suggestion.
I've just upgraded to BS 5 in my Blazor app. In BS 4, the data-boundary
attribute worked great for my dropdown needs, but I'm stuck in BS 5, and still haven't come up with a solution.
Having to use new bootstrap.Dropdown(...)
for dropdown popper configuration in a Blazor app is highly inconvenient, as Blazor does not lend itself towards executing JS as DOM elements come in and out of existence during re-renders. The attribute approach, however, works perfectly.
alternative PR in #34259 that uses JSON parse to allow more flexibility
Here is a simple solution that worked for me in the interim to prevent scrolling issues when using dropdowns within a table-responsive class.
BS4 $('[data-bs-toggle="dropdown"]').dropdown({boundary: 'window'});
BS5 $('[data-bs-toggle="dropdown"]').dropdown({popperConfig: {strategy: 'fixed'}});
After more than a few hours and various attempts I found a working version:
const dropdowns = document.querySelectorAll('.dropdown-toggle')
const dropdown = [...dropdowns].map((dropdownToggleEl) => new bootstrap.Dropdown(dropdownToggleEl, {
popperConfig(defaultBsPopperConfig) {
return { ...defaultBsPopperConfig, strategy: 'fixed' };
}
}));
In regards to the issue: https://github.com/twbs/bootstrap/issues/32947
It would be nice if this could be solved with a simple data attribute by exposing a data attribute for popper for
strategy
, likedata-bs-strategy
.Popper documentation: https://popper.js.org/docs/v2/constructors/#strategy Example using existing javascript: https://jsfiddle.net/4gpy025q/1/
Thanks