下拉列表中的宽度与搜索

时间：2018-04-13 07:17:22

标签： javascript css drop-down-menu

我有一个带文本框的下拉列表，下拉菜单的宽度为：100％..

我试图让它变得灵活，以便它适应列表中最长选项的宽度。

现在宽度设置为100％。

＆＃13;
＆＃13; 
body {
  padding: 40px;
}

.dropdown {
  font-family: "Segoe UI", Optima, Helvetica, Arial, sans-serif;
}

.dropWithSearch {
  width: 100px;
  position: relative;
  padding-top: 0px !important;
}

.dropWithSearch-input-div {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 200;
  padding: 4px;
}

.dropWithSearch-input {
  width: 100%;
  font-size: 1em;
  padding: 10px 15px 10px 40px;
  border: 1px solid #ddd;
  margin-bottom: 0px !important;
  border-radius: 3px;
}

.dropWithSearch-option-div {
  position: relative;
  width: 100%;
  max-height: 300px;
  overflow-y: scroll;
  z-index: 100;
}

.multi-dropdown-menu {
  border-collapse: collapse;
  width: 100%;
  border: 0px;
  font-size: 18px;
  margin: 0px !important;
  padding: 4px !important;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.multi-dropdown-menu li {
  border-bottom: 2px solid white;
}

.multi-dropdown-menu li a {
  border: 0px solid #ddd;
  margin-top: -1px;
  padding: 4px;
  text-decoration: none;
  font-size: 1em;
  color: black;
  display: block;
}

.active {
  background-color: #5897fb;
}

.active a {
  color: white !important;
  font-weight: bold;
}

* {
  box-sizing: border-box;
}

input.multi-checkboxes {
  display: none;
}

.selected a {
  background-color: #ff4242;
  font-weight: bold;
}

.open>.dropdown-menu {
  display: block;
  width: 100%;
}

.multi-dorpdown {
  padding-bottom: 0px;
  padding-top: 0px;
  border: 1px solid #aaaaaa;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dropdown">
  <button data-toggle="dropdown" class="filter btn btn-default dropdown multi-dorpdown" type="text" id="buttonId">Branches</button>
  <div role="menu" class="dropWithSearch dropdown-menu " id="filter_branch_ul" tabindex="-1">
    <div class="dropWithSearch-input-div">
      <input class="dropWithSearch-input" type="text" id="filter_branch" placeholder="Search" title="Type in a name">
    </div>
    <div class="dropWithSearch-option-div">
      <ul class="multi-dropdown-menu" id="filter_branch_ul">
        <li style="">
          <a href="#"><input class="multi-checkboxes" id="35" type="checkbox" name="branches"><span>35-JAGRAON</span></a>
        </li>
        <li style="">
          <a href="#"><input class="multi-checkboxes" id="37" type="checkbox" name="branches"><span>37-NADALA</span></a>
        </li>
        <li style="">
          <a href="#"><input class="multi-checkboxes" id="39" type="checkbox" name="branches"><span>39-LAMBRA</span></a>
        </li>
        <li style="">
          <a href="#"><input class="multi-checkboxes" id="40" type="checkbox" name="branches"><span>40-SAMRALA</span></a>
        </li>
        <li style="">
          <a href="#"><input class="multi-checkboxes" id="43" type="checkbox" name="branches"><span>43-GARHSHANKAR</span></a>
        </li>
        <li style="">
          <a href="#"><input class="multi-checkboxes" id="45" type="checkbox" name="branches"><span>45-JANDIALA GURU</span></a>
        </li>
        <li style="" class="">
          <a href="#"><input class="multi-checkboxes" id="46" type="checkbox" name="branches"><span>46-UGGI</span></a>
        </li>
        <li style="" class="">
          <a href="#"><input class="multi-checkboxes" id="48" type="checkbox" name="branches" checked="checked"><span>48-MODEL TOWN JALANDHAR</span></a>
        </li>
      </ul>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

为了更好地查看和理解，我分享了JSFiddle

2 个答案:

答案 0 :(得分：2)

您只需要将width: auto而不是width: 100%提供给下拉菜单的容器：

.open>.dropdown-menu {
  display: block;
  width: auto;
}


body {
  padding: 40px;
}

.dropdown {
  font-family: "Segoe UI", Optima, Helvetica, Arial, sans-serif;
}

.dropWithSearch {
  width: 100px;
  position: relative;
  padding-top: 0px !important;
}

.dropWithSearch-input-div {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 200;
  padding: 4px;
}

.dropWithSearch-input {
  width: 100%;
  font-size: 1em;
  padding: 10px 15px 10px 40px;
  border: 1px solid #ddd;
  margin-bottom: 0px !important;
  border-radius: 3px;
}

.dropWithSearch-option-div {
  position: relative;
  width: 100%;
  max-height: 300px;
  overflow-y: scroll;
  z-index: 100;
}

.multi-dropdown-menu {
  border-collapse: collapse;
  width: 100%;
  border: 0px;
  font-size: 18px;
  margin: 0px !important;
  padding: 4px !important;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.multi-dropdown-menu li {
  border-bottom: 2px solid white;
}

.multi-dropdown-menu li a {
  border: 0px solid #ddd;
  margin-top: -1px;
  padding: 4px;
  text-decoration: none;
  font-size: 1em;
  color: black;
  display: block;
}

.active {
  background-color: #5897fb;
}

.active a {
  color: white !important;
  font-weight: bold;
}

* {
  box-sizing: border-box;
}

input.multi-checkboxes {
  display: none;
}

.selected a {
  background-color: #ff4242;
  font-weight: bold;
}

.open>.dropdown-menu {
  display: block;
  width: auto;
}

.multi-dorpdown {
  padding-bottom: 0px;
  padding-top: 0px;
  border: 1px solid #aaaaaa;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dropdown">
  <button data-toggle="dropdown" class="filter btn btn-default dropdown multi-dorpdown" type="text" id="buttonId">Branches</button>
  <div role="menu" class="dropWithSearch dropdown-menu " id="filter_branch_ul" tabindex="-1">
    <div class="dropWithSearch-input-div">
      <input class="dropWithSearch-input" type="text" id="filter_branch" placeholder="Search" title="Type in a name">
    </div>
    <div class="dropWithSearch-option-div">
      <ul class="multi-dropdown-menu" id="filter_branch_ul">
        <li style="">
          <a href="#"><input class="multi-checkboxes" id="35" type="checkbox" name="branches"><span>35-JAGRAON</span></a>
        </li>
        <li style="">
          <a href="#"><input class="multi-checkboxes" id="37" type="checkbox" name="branches"><span>37-NADALA</span></a>
        </li>
        <li style="">
          <a href="#"><input class="multi-checkboxes" id="39" type="checkbox" name="branches"><span>39-LAMBRA</span></a>
        </li>
        <li style="">
          <a href="#"><input class="multi-checkboxes" id="40" type="checkbox" name="branches"><span>40-SAMRALA</span></a>
        </li>
        <li style="">
          <a href="#"><input class="multi-checkboxes" id="43" type="checkbox" name="branches"><span>43-GARHSHANKAR</span></a>
        </li>
        <li style="">
          <a href="#"><input class="multi-checkboxes" id="45" type="checkbox" name="branches"><span>45-JANDIALA GURU</span></a>
        </li>
        <li style="" class="">
          <a href="#"><input class="multi-checkboxes" id="46" type="checkbox" name="branches"><span>46-UGGI</span></a>
        </li>
        <li style="" class="">
          <a href="#"><input class="multi-checkboxes" id="48" type="checkbox" name="branches" checked="checked"><span>48-MODEL TOWN JALANDHAR</span></a>
        </li>
      </ul>
    </div>
  </div>
</div>

答案 1 :(得分：0)

删除所有不必要的宽度定义为100％。使用auto为搜索框定义，因此它将占用内容的最大宽度。并为下拉内容定义了100％的宽度。 

   
body {
  padding: 40px;
}

.dropdown {
  font-family: "Segoe UI", Optima, Helvetica, Arial, sans-serif;
}

.dropWithSearch {
  
  position: relative;
  padding-top: 0px !important;
}

.dropWithSearch-input-div {

  height: 100%;
  position: relative;
  z-index: 200;
  padding: 4px;
}

.dropWithSearch-input {

  font-size: 1em;
  padding: 10px 15px 10px 40px;
  border: 1px solid #ddd;
  margin-bottom: 0px !important;
  border-radius: 3px;
  width: 100%
}

.dropWithSearch-option-div {
  position: relative;
  max-height: 300px;
  overflow-y: scroll;
  z-index: 100;
}

.multi-dropdown-menu {
  border-collapse: collapse;
  border: 0px;
  font-size: 18px;
  margin: 0px !important;
  padding: 4px !important;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.multi-dropdown-menu li {
  border-bottom: 2px solid white;
}

.multi-dropdown-menu li a {
  border: 0px solid #ddd;
  margin-top: -1px;
  padding: 4px;
  text-decoration: none;
  font-size: 1em;
  color: black;
  display: block;
}

.active {
  background-color: #5897fb;
}

.active a {
  color: white !important;
  font-weight: bold;
}

* {
  box-sizing: border-box;
}

input.multi-checkboxes {
  display: none;
}

.selected a {
  background-color: #ff4242;
  font-weight: bold;
}

/* .selected.active>a:hover {
  background-color: #93fc83;
  color: red;
} */

/* .selected.active>a {
  background-color: #93fc83;
  color: red;
} */

.open>.dropdown-menu {
  display: block;
}

.multi-dorpdown {
  padding-bottom: 0px;
  padding-top: 0px;
  border: 1px solid #aaaaaa;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="dropdown">
  <button data-toggle="dropdown" class="filter btn btn-default dropdown multi-dorpdown" type="text" id="buttonId">Branches</button>
  <div role="menu" class="dropWithSearch dropdown-menu " id="filter_branch_ul" tabindex="-1">
    <div class="dropWithSearch-input-div">
      <input class="dropWithSearch-input" type="text" id="filter_branch" placeholder="Search" title="Type in a name">
    </div>
    <div class="dropWithSearch-option-div">
      <ul class="multi-dropdown-menu" id="filter_branch_ul">
        <li style=""><a href="#"><input class="multi-checkboxes" id="35" type="checkbox" name="branches"><span>35-JAGRAON</span></a></li>
        <li style=""><a href="#"><input class="multi-checkboxes" id="37" type="checkbox" name="branches"><span>37-NADALA</span></a></li>
        <li style=""><a href="#"><input class="multi-checkboxes" id="39" type="checkbox" name="branches"><span>39-LAMBRA</span></a></li>
        <li style=""><a href="#"><input class="multi-checkboxes" id="40" type="checkbox" name="branches"><span>40-SAMRALA</span></a></li>
        <li style=""><a href="#"><input class="multi-checkboxes" id="43" type="checkbox" name="branches"><span>43-GARHSHANKAR</span></a></li>
        <li style=""><a href="#"><input class="multi-checkboxes" id="45" type="checkbox" name="branches"><span>45-JANDIALA GURU</span></a></li>
        <li style="" class=""><a href="#"><input class="multi-checkboxes" id="46" type="checkbox" name="branches"><span>46-UGGI</span></a></li>
        <li style="" class=""><a href="#"><input class="multi-checkboxes" id="48" type="checkbox" name="branches" checked="checked"><span>48-MODEL TOWN JALANDHAR</span></a></li>
        <li style="" class=""><a href="#"><input class="multi-checkboxes" id="49" type="checkbox" name="branches" checked="checked"><span>49-BOOLPUR</span></a></li>
        <li style="" class=""><a href="#"><input class="multi-checkboxes" id="50" type="checkbox" name="branches"><span>50-RAZAPUR</span></a></li>
        <li style="" class=""><a href="#"><input class="multi-checkboxes" id="28" type="checkbox" name="branches" checked="checked"><span>28-CHABBEWAL</span></a></li>
        <li style="" class=""><a href="#"><input class="multi-checkboxes" id="9013" type="checkbox" name="branches"><span>9013-BC-Boolpur (B.O. Sultanpur Lodhi)</span></a></li>
        <li style="" class=""><a href="#"><input class="multi-checkboxes" id="38" type="checkbox" name="branches"><span>38-KHANNA</span></a></li>
      </ul>
    </div>
  </div>
</div>

相关问题
最新问题