I'm currently working on creating a search bar with autocomplete functionality similar to Google's. However, I've encountered an issue where the dropdown menu doesn't expand as wide as the search bar.
This works perfectly fine on Microsoft Edge, but for some reason, it's not functioning properly on Google Chrome.
I've attempted to adjust the width settings to 'auto' and 'device-width', but there seems to be no change in the width of the autocomplete dropdown.
.input-group-btn{ width:auto;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name = "viewport" content = "width=device-width, inital-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
body{
background:#202a3f;
}
.container{
margin-top:200px;
}
.glyphicon-search{
font-size:20px;
}
.btn-default{
background: orange;
width:100px;
padding:12.5px;
}
.form-control{
padding:25px;
font-size:20px;
}
.input-group-btn{
width:auto;
}
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
}
</style>
</head>
<body>
<div class="navbar" >
<a href="#home" >Home</a>
<a href="#favorites">Favorites</a>
<div class = "dropdown">
<button class="dropbtn">Genre
<i class = "fa fa-caret-down"></i>
</button>
<div class ="dropdown-content">
<a href="#">Drama</a>
</div>
</div>
</div>
<div class="container">
<form action="/action_page.php">
<div class = "input-group">
<input type="text" class = "form-control" placeholder="Search" name="search">
<div class ="input-group-btn ">
<button type="submit" class = "btn btn-default">
<i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</body>
</html>Whenever I set the width to 'auto' or 'device-width', the dropdown becomes very small. But, if I specify an extremely large number like 1000px or 30000px, the entire search bar shrinks in width and then the dropdown aligns its width with the search bar.