I make search bar in which I make filter to search accurately. In which I give three values areaUnit area and price. But it just disturb the position. I just want that the filter div act like a dropdown. The filter div act like a dropdown menu in which I put other input values. It just slide like a dropdown. I tried this.
<form>
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" style="width: 700px; color:#000000; text-align: left;" placeholder="Search Houses" onclick="filterfunction()">
<button type="submit" class="searchButton" >
<i class="fa fa-search"></i>
</button>
</div>
<div id="filter" style="display:none; background-color:#D3D3D3;border:1px; border-style:solid; border-color:black; border-radius:5px">
<label for="price"style=" margin-left:75px;border:none" >Area Unit</label>
<label for="price"style=" margin-left:30px;border:none " >Area</label>
<label for="price" style=" margin-left:70px;border:none">Price</label>
<div>
<select asp-for="Input.areaunit" style="height :50px; border-style:solid ;border-color: black;border-radius:5px; margin-left:100px;">
<option value="" hidden>Select area Unit</option>
<option value="Kanal">Kanal</option>
<option value="Marla">Marla</option>
<option value="Square Feet">Square Feet</option>
<option value="Square Meter">Square Meter</option>
<option value="Square Yards">Square Yards</option>
</select>
<input list="Input.area.list"asp-for="Input.area" placeholder="Please Select area" style="height :50px; border-style:solid ;border-color: black;border-radius:5px; margin-left:20px;">
<datalist id="Input.area.list">
<option value="10"></option>
<option value="12"></option>
<option value="15"></option>
<option value="20"></option>
<option value="25"></option>
<option value="30"></option>
<option value="35"></option>
</datalist>
<input type="hidden" name="Input.price" id="Input.price"asp-for="Input.price" />
<!-- Hidden field above-->
<input list="Input.price.list" id="rsInput" placeholder="Please Select price" style="height :50px; border-style:solid ;border-color: black;border-radius:5px; margin-left:20px;">
<datalist id="Input.price.list">
<option value="5,00,000"></option>
<option value="10,00,000"></option>
<option value="15,00,000"></option>
<option value="20,00,000"></option>
<option value="25,00,000"></option>
<option value="30,00,000"></option>
<option value="35,00,000"></option>
<option value="40,00,000"></option>
<option value="45,00,000"></option>
</datalist>
</div>
</div>
</div>
</form>
View:
position: relative
to your .wrap
class. This will allow this div to become a parent of any absolutely positioned child.position: absolute
to your filter
div. Now this will reposition your filter div on top (or below) your search bar because position absolute will ignore the other elements around it. To reposition it accurately, use add top: 20px;
(change the 20px to whatever fits to accurately position your filter under your search bar)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.