How to force menu to open upwards in a searchable dropdown?

Question

I have an html code below

Dropdown--> About Base Blog Contact Custom Support Tools

Its basically taken from this website https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_filter

This is how it looks like

It does a search on the items displayed in the menu. Now I want this menu to open upwards and not downwards

On looking online, I found I have to provide bottom: 100%; Drop-down menu that opens up/upward with pure css. Now in my case, there are no <ul> or <li> tags. So this is what I did

.dropdown {
  position: relative;
  display: inline-block;
  bottom: 100%; //added this
}

But it doesn't do anything. How can I force the menu to show upwards?

Answer 1

You could do this using Flexbox:

.dropdown-content.show {
    display: flex;
    flex-direction: column-reverse;
    bottom: 45px; /* hardcoded height of the button */
}

Using w3cschool's existing code:

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  var dropdown, button;
  dropdown = document.getElementById("myDropdown");
  button = document.getElementById("myButton");
  dropdown.classList.toggle("show");
  dropdown.style.bottom = button.offsetHeight + "px";
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #3e8e41;
}

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {
  outline: 3px solid #ddd;
}

.dropdown {
  position: relative;
  display: inline-block;
  padding-top: 250px; /* just for demo purposes */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
  flex-direction: column-reverse; /* show children in a reversed colum (bottom to top) */
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #ddd;
}

.show {
  display: flex;
}

<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>

<div class="dropdown">
  <button id="myButton" onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <a href="#about">About</a>
    <a href="#base">Base</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Contact</a>
    <a href="#custom">Custom</a>
    <a href="#support">Support</a>
    <a href="#tools">Tools</a>
  </div>
</div>

EDIT:

I just removed the hardcoded button height from the CSS and instead calculated the height using Javascript. See the modified function myFunction() and the added id="myButton" in the markup.