multiselect déroulant disparait

Question

J'ai un site fait avec Symfony et il y a un menu déroulant class = menu déroulant menu multiselect conteneur

Il fonctionne bien, mais lorsque je tente de réduire la fenêtre: lorsque le « bloc d'emplacement » passe sous le menu déroulant; la chute de goutte disparaît et n'est pas clikable:

https://drive.google.com/open?id=0B2bmESDsWIPoRWtROTREWnVMTmM

voici le code:

<!-- 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="&amp;#160;&amp;#160;&amp;#160;Kite"> 
      </optgroup>    <option value="33"> 
      &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Bow kite 
     </option>    <option value="34"> 
      &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Delta kite 
     </option>    <option value="35" selected="selected"> 
      &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Hybrid kite 
     </option>    <option value="45"> 
      &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;C-KITE 
     </option>    <optgroup label="&amp;#160;&amp;#160;&amp;#160;Board"> 
      </optgroup>    <option value="50"> 
      &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Wake-style Board Boots 
     </option>    <option value="27"> 

     &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Surfboard 
     for kiteboarding 
     </option>    <option value="47"> 
      &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Foil 
     Board 
     </option>    <option value="48"> 
      &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Race 
     board 
     </option>    <option value="49"> 

     &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Twin-tip 
     </option>    <option value="51"> 

     &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Wakeskate 
     </option>    <option value="52"> 
      &amp;#160;&amp;#160;&amp;#160;Kitesurf accessories 
     </option>    <option value="64"> 
      &amp;#160;&amp;#160;&amp;#160;Buggy rental 
     </option>    <optgroup label="Wetsuit /Drysuit"> 
      </optgroup>    <option value="32"> 
      &amp;#160;&amp;#160;&amp;#160;Wetsuit 
     </option>    <option value="37"> 
      &amp;#160;&amp;#160;&amp;#160;Drysuit 
     </option>    <optgroup label="Stand Up Paddle/Canoe 
     Kayak"> 
      </optgroup>    <option value="20"> 
      &amp;#160;&amp;#160;&amp;#160;Inflatable 
     </option>    <option value="28"> 
      &amp;#160;&amp;#160;&amp;#160;Surf SUP 
     </option>    <option value="29"> 
      &amp;#160;&amp;#160;&amp;#160;Flatwater 
     </option>    <option value="30"> 
      &amp;#160;&amp;#160;&amp;#160;Flatwater 
     </option>    <option value="31"> 
      &amp;#160;&amp;#160;&amp;#160;Race SUP 
     </option>    <option value="62"> 
      &amp;#160;&amp;#160;&amp;#160;Kayak/Canoe 
     </option>    <optgroup label="Surf"> 
      </optgroup>    <option value="44"> 
      &amp;#160;&amp;#160;&amp;#160;Hybrid 
     </option>    <option value="43"> 
      &amp;#160;&amp;#160;&amp;#160;Gun 
     </option>    <option value="42"> 
      &amp;#160;&amp;#160;&amp;#160;Fish 
     </option>    <option value="41"> 
      &amp;#160;&amp;#160;&amp;#160;Longboard 
     </option>    <option value="40"> 
      &amp;#160;&amp;#160;&amp;#160;Funboard 
     </option>    <option value="39"> 
      &amp;#160;&amp;#160;&amp;#160;Shortboard 
     </option>    <optgroup label="Diving"> 
      </optgroup>    <option value="57"> 
      &amp;#160;&amp;#160;&amp;#160;Console Gauges 
     </option>    <option value="56"> 
      &amp;#160;&amp;#160;&amp;#160;Nitrox Computer 
     </option>    <option value="55"> 
      &amp;#160;&amp;#160;&amp;#160;Regulator 
     </option>    <option value="54"> 
      &amp;#160;&amp;#160;&amp;#160;Vest BCD 
     </option>    <option value="58"> 
      &amp;#160;&amp;#160;&amp;#160;Octopus or Alternate Air Source 
     </option>    <option value="59"> 
      &amp;#160;&amp;#160;&amp;#160;Air Tank 
     </option>    <option value="60"> 
      &amp;#160;&amp;#160;&amp;#160;Weight and/or Weight Belt 
     </option>    <option value="61"> 
      &amp;#160;&amp;#160;&amp;#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"> 

CSS

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

Si vous avez un idée wh à je pourrais faire?

Merci

Answer 1

Le problème était que bootstrap était pas à jour, je juste besoin de changer le lien vers la nouvelle version du bootstrap https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js