Opening bootstrap dropdown menu from button inside table using
function xonclick() {
const dropdownButton = document.getElementById('settingsDropDown');
const dropdownMenu = document.getElementById('seadedMenyy');
// Position the dropdown near the clicked button
const clickedButton = document.getElementById('grid_muu');
const buttonRect = clickedButton.getBoundingClientRect();
dropdownMenu.style.position = 'absolute';
dropdownMenu.style.left = buttonRect.left + 'px';
dropdownMenu.style.top = (buttonRect.bottom + 2) + 'px';
// Create and show dropdown
const dropdown = new bootstrap.Dropdown(dropdownButton);
dropdown.show();
}
#settingsDropDown {
position: absolute;
visibility: hidden;
pointer-events: none;
}
.dropdown-menu {
display: block;
opacity: 0;
transition: opacity 0.2s;
}
.dropdown-menu.show {
opacity: 1;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="dropdown">
<button id="settingsDropDown" class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" id="seadedMenyy">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<table>
<tr>
<td>Some text</td>
<td><button id="grid_muu" onclick="xonclick()">Open menu</button></td>
</tr>
</table>
</body>
does not open it. Clicking in "Open menu" button does nothing. How to open dropdown menu near this button if button is clicked?
Dropdown is defined in other place in DOM and display is set to none.
Okay, Then let's create a working solution that positions the dropdown correctly on the first click and handles subsequent clicks properly:
function xonclick() {
const dropdownButton = document.getElementById('settingsDropDown');
const dropdownMenu = document.getElementById('seadedMenyy');
const clickedButton = document.getElementById('grid_muu');
// Get current dropdown instance
const existingDropdown = bootstrap.Dropdown.getInstance(dropdownButton);
// Toggle behavior
if (existingDropdown) {
existingDropdown.dispose();
dropdownMenu.classList.remove('show');
return;
}
// Get precise button position
const rect = clickedButton.getBoundingClientRect();
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// Set position with scroll offset
dropdownMenu.style.position = 'absolute';
dropdownMenu.style.left = `${rect.left}px`;
dropdownMenu.style.top = `${rect.bottom + scrollTop}px`;
// Create and show new dropdown instance
const dropdown = new bootstrap.Dropdown(dropdownButton);
dropdown.show();
}
And improve the positioning further.
.dropdown-menu {
margin: 0 !important;
padding: 0.5rem 0;
transform: none !important;
}
#settingsDropDown {
position: fixed;
visibility: hidden;
pointer-events: none;
}
Then it will give you the consistent positioning and proper dropdown on every click.