Javascript 下拉多选消失
我有一个用Symfony制作的网站,有一个带有class=multiselect container下拉菜单的下拉菜单 它工作得很好,除了当我试图缩小窗口:当“位置块”在下拉菜单下;下拉菜单消失且不可剪裁: 代码如下:Javascript 下拉多选消失,javascript,css,twitter-bootstrap-3,symfony-2.3,Javascript,Css,Twitter Bootstrap 3,Symfony 2.3,我有一个用Symfony制作的网站,有一个带有class=multiselect container下拉菜单的下拉菜单 它工作得很好,除了当我试图缩小窗口:当“位置块”在下拉菜单下;下拉菜单消失且不可剪裁: 代码如下: <!-- form-category --> <form name="" method="get" action="/en/listing/search_result" class="form-category alt col-xs-12">
<!-- form-category -->
<form name="" method="get" action="/en/listing/search_result" class="form-category alt col-xs-12">
<fieldset>
<legend class="hidden">form-category</legend>
<div class="form-holder">
<div class="col categories">
<strong class="title">
<label for="categories">
Categories
</label>
</strong>
<div class="multiselect">
<select id="categories" name="categories[]" multiple="multiple">
<optgroup label="Kitesurf Rental">
</optgroup> <optgroup label="&#160;&#160;&#160;Kite">
</optgroup> <option value="33">
&#160;&#160;&#160;&#160;&#160;&#160;Bow kite
</option> <option value="34">
&#160;&#160;&#160;&#160;&#160;&#160;Delta kite
</option> <option value="35" selected="selected">
&#160;&#160;&#160;&#160;&#160;&#160;Hybrid kite
</option> <option value="45">
&#160;&#160;&#160;&#160;&#160;&#160;C-KITE
</option> <optgroup label="&#160;&#160;&#160;Board">
</optgroup> <option value="50">
&#160;&#160;&#160;&#160;&#160;&#160;Wake-style Board Boots
</option> <option value="27">
&#160;&#160;&#160;&#160;&#160;&#160;Surfboard
for kiteboarding
</option> <option value="47">
&#160;&#160;&#160;&#160;&#160;&#160;Foil
Board
</option> <option value="48">
&#160;&#160;&#160;&#160;&#160;&#160;Race
board
</option> <option value="49">
&#160;&#160;&#160;&#160;&#160;&#160;Twin-tip
</option> <option value="51">
&#160;&#160;&#160;&#160;&#160;&#160;Wakeskate
</option> <option value="52">
&#160;&#160;&#160;Kitesurf accessories
</option> <option value="64">
&#160;&#160;&#160;Buggy rental
</option> <optgroup label="Wetsuit /Drysuit">
</optgroup> <option value="32">
&#160;&#160;&#160;Wetsuit
</option> <option value="37">
&#160;&#160;&#160;Drysuit
</option> <optgroup label="Stand Up Paddle / Canoe
Kayak">
</optgroup> <option value="20">
&#160;&#160;&#160;Inflatable
</option> <option value="28">
&#160;&#160;&#160;Surf SUP
</option> <option value="29">
&#160;&#160;&#160;Flatwater
</option> <option value="30">
&#160;&#160;&#160;Flatwater
</option> <option value="31">
&#160;&#160;&#160;Race SUP
</option> <option value="62">
&#160;&#160;&#160;Kayak / Canoe
</option> <optgroup label="Surf">
</optgroup> <option value="44">
&#160;&#160;&#160;Hybrid
</option> <option value="43">
&#160;&#160;&#160;Gun
</option> <option value="42">
&#160;&#160;&#160;Fish
</option> <option value="41">
&#160;&#160;&#160;Longboard
</option> <option value="40">
&#160;&#160;&#160;Funboard
</option> <option value="39">
&#160;&#160;&#160;Shortboard
</option> <optgroup label="Diving">
</optgroup> <option value="57">
&#160;&#160;&#160;Console Gauges
</option> <option value="56">
&#160;&#160;&#160;Nitrox Computer
</option> <option value="55">
&#160;&#160;&#160;Regulator
</option> <option value="54">
&#160;&#160;&#160;Vest BCD
</option> <option value="58">
&#160;&#160;&#160;Octopus or Alternate Air Source
</option> <option value="59">
&#160;&#160;&#160;Air Tank
</option> <option value="60">
&#160;&#160;&#160;Weight and/or Weight Belt
</option> <option value="61">
&#160;&#160;&#160;Scuba accessories
</option> <option value="63">
MTB Mountainboard rental
</option></select>
</div>
</div>
<div class="col location">
<strong class="title">
<label for="location_address">
Place
</label>
</strong>
<div class="field-holder">
}
如果你知道我能做什么
谢谢问题是引导程序已经过时,我只需要更改指向新引导程序版本的链接寻求代码帮助的问题必须包含在问题本身中重现所需的最短代码,最好是在堆栈片段中。虽然您提供了一个链接,但如果该链接无效,您的问题对其他将来遇到相同问题的用户将毫无价值。看。
.multiselect-container {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0
.multiselect-container .input-group {
margin: 5px
}
.multiselect-container > li {
padding: 0
}
.multiselect-container > li > a.multiselect-all label {
font-weight: 700
}
.multiselect-container > li.multiselect-group label {
margin: 0;
padding: 3px 20px 3px 20px;
height: 100%;
font-weight: 700
}
.multiselect-container > li.multiselect-group-clickable label {
cursor: pointer
}
.multiselect-container > li > a {
padding: 0
}
.multiselect-container > li > a > label {
margin: 0;
height: 100%;
cursor: pointer;
font-weight: 400;
padding: 3px 20px 3px 40px
}
.multiselect-container > li > a > label.radio, .multiselect-container > li > a > label.checkbox {
margin: 0
}
.multiselect-container > li > a > label > input[type=checkbox] {
margin-bottom: 5px
}
.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
.form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio {
padding: 3px 20px 3px 40px
}
.form-inline .multiselect-container li a label.checkbox input[type=checkbox], .form-inline .multiselect-container li a label.radio input[type=radio] {
margin-left: -20px;
margin-right: 0
}