How to append the bootstrap 5 dropdown menu to a specific element. when the dropdown element is insi-CodePudding

The

Complete snippet here: jsfiddle

So, I have try to position a dropdown relatively to body, not parent with boundary option from Bootstrap Docs,

Bootstrap docs says that can only be done via javascript (not via data attributes),
so I have try below javascript methods code. but no luck.

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle')) var dropdownList = dropdownElementList.map(function (dropdownToggleEl) { return new bootstrap.Dropdown(dropdownToggleEl, { boundary: document.querySelector('#main-wrapper') }) })

Any suggestions with proper solution for where I'm going wrong would be greatly appreciated.

Our HTML Code:

<div id="main-wrapper"> <div > <div > <div > <h4>Shilipp Sotocnik</h4> <div > <a href="#" role="button" id="dropdownMenu1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i ></i></a> <ul aria-labelledby="dropdownMenu1"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div> </div> </div> </div> </div>

CodePudding user response：

Use jQuery to listen events on dropdown to toggle overflow class at element
<div >.

$('a[data-bs-toggle="dropdown"]').on('show.bs.dropdown', function () { $(".owl-stage-outer").addClass("overflow_none"); }) $('a[data-bs-toggle="dropdown"]').on('hide.bs.dropdown', function () { $(".owl-stage-outer").removeClass("overflow_none"); })

.overflow_none { overflow: unset !important; }

CodePudding user response：

Have you tried this in css?

.owl-stage { overflow: auto !important; }