Автозаполнение Dropdown Search Настройка ширины - PullRequest
Новая
       7

Автозаполнение Dropdown Search Настройка ширины

0 голосов
/ 24 марта 2019

Я пытаюсь создать панель поиска с выпадающим меню автозаполнения, как у Google. Тем не менее, раскрывающийся список не так широк, как панель поиска

ЭТО РАБОТАЕТ НА MICROSOFT EDGE, НО НЕ В GOOGLE CHROME

Я попытался изменить ширину на auto и device-width, но я не вижу изменений в ширине выпадающего меню автозаполнения

.Входной-группа-BTN { ширина: авто;

} 

<!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>

Когда я сохраняю ширину автоматически или ширину устройства, выпадающий список действительно невелик, однако, если ширина - это какое-то огромное действительное число, такое как 1000px или 30000px, вся строка поиска уменьшается в ширину, а затем выпадающее меню достигает ширины панель поиска.

enter image description here enter image description here

1 Ответ

0 голосов
/ 24 марта 2019

Насколько я понимаю, ваша проблема в том, что вы хотите увеличить ширину поля ввода поиска, а автозаполнение составляет менее 100%, как указано в поле ввода поиска. Прежде всего, включите jquery.min.js для удаления ошибки jquery, отображаемой в вашей консоли. После этого сделайте некоторые изменения, которые я сделал в вашем CSS и HTML для решения проблемы. 

body{
  background:#202a3f;
}

.form {
  float: left;
  width: 100%;
}

.custom-layout{
  position: relative;
  float: left;
  width: 100%;
  border-collapse: separate;
}

.custom-layout button{
  position: absolute;
  right: 0;
  float: left;
}

.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;
}

.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;
}
<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" class="form">
      <div class = "input-group custom-layout">
         <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>

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...