Menu
I’m building a dropdown component for my project. But when i add the component is a responsive table the menu is open within the div.
Here is my code: https://codesandbox.io/s/fast-pond-pto57t?file=%2Fsrc%2FApp.vue
How can i make the dropdown-menu to append to the body and set a transform(x,y)
888
asked Dec 04 '25 14:12
Try with position: fixed !important;:
new Vue({
el: "#demo",
data() {
return {
showMenu: false,
};
},
}).dropdown-menu {
position: fixed !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div id="demo">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Joe Band</td>
<td>
<div class="dropdown">
<button class="dropdown-toggle" @click="showMenu = !showMenu">
Action
</button>
<ul class="dropdown-menu" :class="{ show: showMenu }">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>I find both existing answers valuable, but neither complete:
.dropdown-menu to <body>, so it stops working as soon as one of the ancestors of .dropdown has any valid transform value other than none (spec ref). Here's an example.In my estimation, the correct solution would be to do both:
<body> while dropdown is open.That's pretty much it!
This particular task used to be easy in prior versions of Bootstrap.
I've spent hours going through Bootstrap 5's and Popper's documentation and examples, trying to find a way to do this simple task: specify a target container for popper content.
If someone knows how to achieve this in Bootstrap 5 without having to meddle with DOM ourselves, I'd be delighted to learn how.
Eventually I gave up and ended up moving the menu in DOM myself, after Popper positions it:
Working demo.
In more detail, this hybrid solution:
position: fixed, so Popper does the heavy lifting of positioning<body>, after Popper positioned it. Additionally, I'm moving the menu back to its original place in DOM once the dropdown is closed. It might not be necessary, but to me it makes a lot of sense. Common sense.The solution seems to work in all cases, including inside 3d transformed ancestors. I've smoke tested it in both latest Vue 2 (2.7.10) and latest Vue 3 (3.2.40). Does the job.
Same exact logic in Composition.
Side note: perhaps I'm too demanding but, by comparison with prior versions, I find Bootstrap 5 difficult to work with and poorly documented, at least at this point in time.
This should have been a trivial task. Specify container: 'body' in Dropdown's config. Done!
I'm a bit disappointed.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
