In order to enhance user experience, I have implemented a live search bar that is only visible on mobile screens.
For the CSS styling:
.search-results {
z-index: 9999;
width: 80vw;
position: absolute;
top: 80%;
left: 10%;
}
.search-results li {
width: 100%;
overflow: hidden;
}
.link-p-colr {
color: #333;
text-decoration: none;
padding-bottom: 1rem;
}
.live-outer {
display: flex;
align-items: center;
/* Vertically center the content */
width: 100%;
height: 60px;
border-bottom: 1px solid #ccc;
background: #fff;
padding-bottom: 1rem;
}
.live-im img {
width: 60px;
/* Set a fixed width for the image */
height: 60px;
flex-shrink: 0;
/* Ensure the image container doesn't shrink */
}
.live-product-det {
flex-grow: 1;
/* Allow the product details container to grow to fill the remaining space */
height: 60px;
overflow: hidden;
}
.live-product-name p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6abb6aa">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<form class="py-3 d-flex justify-content-end d-md-none custom-form position-relative" style="background-color:#FFDB58;" method="get" autocomplete="off" id="search2">
<input class="form-control w-50 ms-auto" name="search" type="search" placeholder="Search" aria-label="Search" id="mu">
<ul class="search-results list-group list-unstyled bg-white" id="livesearch2">
<li class="p-3 d-inline">
<a class="link-p-colr" href="http://gadgets92.test/mobiles/product.php?id=2">
<div class="live-outer">
<div class="live-im">
<img style="width: fit-content; height: 60px;" src="http://gadgets92.test/admin/images/products/s7 edge.jpeg">
</div>
<div class="live-product-det ps-3">
<div class="live-product-name">
<p>Samsung Galaxy S7 Edge (4GB RAM +32)</p>
</div>
<div class="live-product-price">
<div class="live-product-price-text">
<p>Rs.50,999</p>
</div>
</div>
</div>
</div>
</a>
</li>
<li class="p-3 d-inline">
<a class="link-p-colr" href="http://gadgets92.test/watches/product.php?id=5">
<div class="live-outer">
<div class="live-im">
<img style="width: fit-content; height: 60px;" src="http://gadgets92.test/admin/images/products/samsung-watch-4.png">
</div>
<div class="live-product-det ps-3">
<div class="live-product-name">
<p>Samsung Watch 4 Smartwatch</p>
</div>
<div class="live-product-price">
<div class="live-product-price-text">
<p>Rs.36,499</p>
</div>
</div>
</div>
</div>
</a>
</li>
<li class="p-3 d-inline">
<a class="link-p-colr" href="http://gadgets92.test/televisions/product.php?id=15">
<div class="live-outer">
<div class="live-im">
<img style="width: fit-content; height: 60px;" src="http://gadgets92.test/admin/images/products/samsung-ua85cu8000kxxl.webp">
</div>
<div class="live-product-det ps-3">
<div class="live-product-name">
<p>Samsung UA85CU8000KXXL 85 inches 4K Smart TV</p>
</div>
<div class="live-product-price">
<div class="live-product-price-text">
<p>Rs.8,46,999</p>
</div>
</div>
</div>
</div>
</a>
</li>
</ul>
<button class="btn btn-success custom-btn me-auto" type="submit">Search</button>
</form>To ensure a scrollable ul element within a specified height without affecting li elements, I utilized Bootstrap 5.3 and tried the following CSS solution:
<style>
.search-results {
max-height: 500px;
overflow: hidden;
overflow-y: scroll;
padding: 0;
}
.search-results li {
padding: 5px 10px;
}
</style>I also explored alternative solutions provided in this Stack Overflow thread.