I am facing an issue with a Bootstrap 5 dropdown menu placed within a div. When I click the icon, the dropdown appears but only those options that overlap the parent div can be hovered/clicked.
In the provided screenshot, the 'Action' option functions correctly as it overlaps the blue parent div. However, hovering over 'Another action' or 'Something else here' does not trigger any response, and clicking them simply closes the menu.
https://i.sstatic.net/lmZQw.png
It seems like the problem might be related to the boundary option mentioned here. While I don't fully comprehend the Bootstrap or Popper documentation on this, my assumption is that I should set the value to a container div (or possibly even body).
The Bootstrap documentation mentions that this can only be achieved through JavaScript (not via data attributes), so I have included the following code:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl, {
boundary: document.querySelector('#planContainer')
})
})
However, this code doesn't seem to make any difference. I have also experimented with setting
boundary: document.getElementsByTagName("BODY")[0]If anyone has suggestions on what could be going wrong, I would greatly appreciate the help.