javascript - 搜索下拉列表的宽度

Question

我有一个带文本框的下拉菜单，下拉菜单的宽度为:100%..

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

现在宽度设置为 100%。

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

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

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

Answer 1

你只需要给下拉菜单的容器一个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>