I have a searchable drop-down list where the user can easily search for items.
Unfortunately, when I use position: absolute; in ".search-box input" and ".select-box.options-container.active", the two "Search..." text fields and the drop-down list "1,2,3,4,5,6...12" become incompatible.
How can i solve this conflict? I want the "Search..." text field to be hidden unless the user selects "Please choose a category", and I want the drop-down list to cover the text field or the text beneath it when it is opened.
I'd be grateful if someone could assist me in resolving this problem.
<pre> const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const searchBox = document.querySelector(".search-box input");
const optionsList = document.querySelectorAll(".option");
selected.addEventListener("click", () => {
optionsContainer.classList.toggle("active");
searchBox.value = "";
filterList("");
if (optionsContainer.classList.contains("active")) {
searchBox.focus();
}
});
optionsList.forEach(o => {
o.addEventListener("click", () => {
selected.innerHTML = o.querySelector("label").innerHTML;
optionsContainer.classList.remove("active");
});
});
searchBox.addEventListener("keyup", function(e) {
filterList(e.target.value);
});
const filterList = searchTerm => {
searchTerm = searchTerm.toLowerCase();
optionsList.forEach(option => {
let label = option.firstElementChild.nextElementSibling.innerText.toLowerCase();
if (label.indexOf(searchTerm) != -1) {
option.style.display = "block";
} else {
option.style.display = "none";
}
});
};
<pre>.login-page {
width: 550px;
padding: 5% 0 0;
margin: auto;
}
.login-page .form .login{
margin-top: -30px;
margin-bottom: 5px;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 500px;
margin: 0 auto 100px;
padding: 35px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
border-radius: 5px;
}
.form input {
font-family: "Arial";
outline: 0;
background: #f2f2f2;
width: 100%;
border: 1px solid;
margin: 0 0 20px;
padding: 15px;
box-sizing: border-box;
font-size: 15px;
border-radius: 5px;
}
.form input:focus{
outline: none;
border:2px solid #08ac4b;
box-shadow: 0 0 1px #08ac4b;
}
.form button {
font-family: "Arial";
text-transform: none;
outline: 0;
background-color: #08ac4b;
width: 100%;
border: 1px solid;
padding: 15px;
color: #ffffff;
font-size: 15px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
border-radius: 5px;
margin: 0 0 20px;
}
.container {
position: relative;
z-index: 1;
margin: 0 auto;
}
body {
background-color: #ffffff;
font-family: "Arial";
}
.select-box {
display: flex;
flex-direction: column;
}
.select-box .options-container {
background: #ffffff;
color: #000000;
max-height: 0px;
transition: all 0.4s;
border-radius: 5px;
overflow: hidden;
order: 1;
}
.selected {
box-sizing: border-box;
content: "";
font-family: "Arial";
outline: none;
border:1px solid;
background: #ffffff;
border-radius: 5px;
margin-bottom: 8px;
color: #000000;
position: relative;
order: 0;
width: 100%;
}
.selected::after {
content: "";
background: url("img/arrow-down.svg");
background-repeat: no-repeat;
transition: all 0.4s;
}
.select-box .options-container.active {
max-height: 240px;
opacity: 1;
overflow-y: scroll;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
font-family: "Arial";
width: 100%;
position: absolute;
}
.select-box .option,
.selected {
padding: 15px;
cursor: pointer;
}
.select-box .option:hover {
background: #edf7f1;
}
.select-box label {
cursor: pointer;
}
.select-box .option .radio {
display: none;
}
.search-box input {
font-family: "Arial";
outline: 0;
background: #ffffff;
box-sizing: border-box;
font-size: 15px;
border-radius: 5px;
opacity: 0;
pointer-events: none;
transition: all 0.4s;
width: 100%;
position: absolute;
}
.search-box input:focus {
outline: none;
border:2px solid #08ac4b;
box-shadow: 0 0 1px #08ac4b;
}
.select-box .options-container.active ~ .search-box input {
opacity: 1;
pointer-events: auto;
}
<pre><div class="login-page">
<div class="form">
<div class="login">
<div class="login-header">
<h3>Post</h3>
<p>Form</p>
</div>
</div>
<form class="login-form">
<input type="text" placeholder="Title"/>
<input type="text" placeholder="Condition"/>
<div class="container">
<div class="select-box">
<div class="options-container">
<div class="option">
<input
type="radio"
class="radio"
id="automobiles"
name="category"
/>
<label for="automobiles">1</label>
</div>
<div class="option">
<input type="radio" class="radio" id="film" name="category" />
<label for="film">2</label>
</div>
<div class="option">
<input type="radio" class="radio" id="science" name="category" />
<label for="science">3</label>
</div>
<div class="option">
<input type="radio" class="radio" id="art" name="category" />
<label for="art">4</label>
</div>
<div class="option">
<input type="radio" class="radio" id="music" name="category" />
<label for="music">5</label>
</div>
<div class="option">
<input type="radio" class="radio" id="travel" name="category" />
<label for="travel">6</label>
</div>
<div class="option">
<input type="radio" class="radio" id="sports" name="category" />
<label for="sports">7</label>
</div>
<div class="option">
<input type="radio" class="radio" id="news" name="category" />
<label for="news">8</label>
</div>
<div class="option">
<input type="radio" class="radio" id="tutorials" name="category" />
<label for="tutorials">9</label>
</div>
<div class="option">
<input type="radio" class="radio" id="tutorials" name="category" />
<label for="tutorials">10</label>
</div>
<div class="option">
<input type="radio" class="radio" id="tutorials" name="category" />
<label for="tutorials">11</label>
</div>
<div class="option">
<input type="radio" class="radio" id="tutorials" name="category" />
<label for="tutorials">12</label>
</div>
</div>
<div class="selected">
Please choose a category
</div>
<div class="search-box">
<input type="text" placeholder="Search..." />
</div>
</div>
</div>
<button>Send</button>
</form>
</div>
</div>
What I have tried:
I am tried to add Search box in drop-list and I cannot search things in the search box. when I put the search box out of the drop-list and it does work. I don't know which part causing this problem. I really appreciate if anyone can help me to find out this issue.