I just created this dropdown menu, but I am encountering an issue.
Whenever I resize the div or h4 element, the text ends up at the top. Even after trying to solve it with text-align: center;, the problem persists.
Here is a visual representation of what I am aiming for:
Below is the CSS code used for styling:
#alue_search {
box-sizing: border-box;
background-image: url('https://cbot.me/images/alue_icon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
color: #353535;
border-radius: 5px 5px 0px 0px;
}
#alue_search:focus {
outline: none;
}
.dropdown {
display: inline-block;
position: relative;
background-color: #f6f6f6;
min-width: 230px;
z-index: 1;
border-radius: 5px;
border: 3px solid #ddd;
}
.dropdown-content {
position: relative;
z-index: 1;
}
.dropdown-content h4 {
height: 35px;
background-color: #fff;
border: none;
border-radius: 5px;
color: #353535;
transition: all 0.3s ease-in-out;
display: none;
}
.dropdown-content h4:hover {
background-color: #ddd;
cursor: pointer;
}
.dropdown-content div {
height: auto;
}
.show {display:block;}
If you require the HTML part as well, here it is:
<div class="dropdown">
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search area" id="alue_search" onkeyup="filterFunction()">
<div onclick="select('Helsinki')"><h4>Helsinki</h4></div>
<div onclick="select('Jyväskylä')"><h4>Jyväskylä</h4></div>
<div onclick="select('Kuopio')"><h4>Kuopio</h4></div>
</div>
</div>