CODEWITHSUNDEEP
javascripthtmlcss
karzan Nawzad
karzan Nawzad

Reputation: 25

javascript Dropdown menu always opens at a specific location

i have a javaScript Drop Down menu which i'am displaying in table row along with some other data . so when i click on the first menu button it opens like it should , slightly below the button , but when i press the menu button for the other rows of data below i the menu always opens in the position of the first row of the table .

long story short i click the dropdown menu and menu appears somewhere else away from the button .

my javascript

/* click on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown 
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

the CSS

.dropbtn {
background-color: #027581;
color: white;
padding: 3.5px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 10%;}



 .dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;  }

.dropdown {
position:relative;
display:flex;
text-align: left; }



.dropdown-content {
display: none;
position:absolute;
background-color: #f1f1f1;
max-width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1; }

show {display:block;}

the html

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Action ▼</button>
<div id="myDropdown" class="dropdown-content">
<a href="user_profile.php">View</a>
<a href="#">Delete</a>

any help i appreaciated

Upvotes: 0

Views: 985

Answers (1)

Steve
Steve

Reputation: 918

On the .dropdown-content you are displaying it as absolute without giving it any position, so it will be at 0,0 of the first parent that is not position:static, so in this case the div.dropdown. Where you are using flex-box on that div, you can utilize flex-direction: column to flow the elements in a column.

EDIT:

In a table situation, the event function is calling an ID. Since an ID needs to be unique, and you are assigning multiple elements with the same ID, the function is only finding the first element with that ID and toggling the class of that element. So in your case it will always be the first row.

In the snippet below, I adjusted it to be a table. In the event function, I pass the event. I can then get the event.target which is the "button" that was clicked. By adding on .parentNode to the end of that (event.target.parentNode), it will go up the DOM one level, and get the parent of the clicked on button. You can use the querySelector on that div to find just the div.dropdown-content within that parent div and toggle the .show class.

See if the snippet below is what you are looking for.

/* click on the button, 
toggle between hiding and showing the dropdown content */
function myFunction(event) {
  const parent = event.target.parentNode;
  parent.querySelector(`.dropdown-content`).classList.toggle(`show`)
}

// Close the dropdown 
window.onclick = function(event) {
  if (!event.target.matches(`.dropbtn`)) {
    document.querySelectorAll(`.dropdown-content.show`)
      .forEach(element => element.classList.remove(`show`));
  }
}
* {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 1rem;
}

td:first-child {
  padding: 0 1rem;
}

.dropbtn {
  background-color: #027581;
  color: white;
  padding: 3.5px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 10%;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: flex;
  text-align: left;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  max-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.show {
  display: block;
}
<table>
  <tbody>
    <tr>
      <td>
        <div class="dropdown">
          <button onclick="myFunction(event)" class="dropbtn">Action ▼</button>
          <div class="dropdown-content">
            <a href="user_profile.php">View</a>
            <a href="#">Delete</a>
          </div>
        </div>
      </td>
      <td>Row 1 / Column 2</td>
      <td>Row 1 / Column 3</td>
      <td>Row 1 / Column 4</td>
    </tr>
    <tr>
      <td>
        <div class="dropdown">
          <button onclick="myFunction(event)" class="dropbtn">Action ▼</button>
          <div class="dropdown-content">
            <a href="user_profile.php">View</a>
            <a href="#">Delete</a>
          </div>
        </div>
      </td>
      <td>Row 2 / Column 2</td>
      <td>Row 2 / Column 3</td>
      <td>Row 2 / Column 4</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions