Html Question posted in
Some basic documentation can be found here.

Html – How to open dropdown menu from outside button

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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.

Tags:

2

Answers


  1. 0

    I think you need to use the bootstrap.Dropdown instead of bootstrap.Popover.
    And wrong position of dropdown menu near the click button.
    The correct code is as follows:

    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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

    You can now click the "Open menu" btn and the dropdown will appear right below it, while keeping the actual dropdown trigger btn hidden.
    Thanks

    Login or Signup to reply.
  2. 0

    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');
  
  // Force dropdown to close if it's open
  const existingDropdown = bootstrap.Dropdown.getInstance(dropdownButton);
  if (existingDropdown) {
    existingDropdown.dispose();
  }
  
  // Get position after the button
  const rect = clickedButton.getBoundingClientRect();
  
  // Set position immediately
  dropdownMenu.style.position = 'fixed';
  dropdownMenu.style.left = `${rect.left}px`;
  dropdownMenu.style.top = `${rect.bottom}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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search