Positioning jquery nice-select


I write to ask for advice about my next problem: I have a popup with several select through the nice-select plugin, which looks like this:

So if I open the first two select, its contents are seen over the rest of the selects (which is the right thing to do), but when you open the third select ("Detail), its content is seen behind the fourth select , that is, it does not overlap as the previous ones do (and that is how it should be) and it looks like this:

The code is as follows:

<div id="popup" class="popup" style="display: none;">
    <div class="content-popup">
      <div class="close"><a href="#" id="close"><img src="../../img/close.png"/></a></div>
        <h4>Selección de Proyectos Asignados</h4>           
        <div class ="padre">
          <p style="margin-top: -1em;"><select id="proy-select" class="small"> <option value='0' data-display="Proyecto" >-- Sel Proyecto --</option> </select> <span id="msg1" style="color:#FF0000;display: none;">Debe ingresar al menos un Proyecto</span>
            <spam id="nproy" style="margin-top: 0.6em;margin-left: 0.2em;position: fixed;font-size: 0.8em;"></spam>

          <p style="margin-top: 1.5em;margin-left: -5.8em"><select id="os-select" class="small"> <option value='0' data-display="Os" >-- Sel Os --</option> </select> <span id="nos" style="margin-top: 0.6em;margin-left: 0.3em;position: fixed;font-size: 0.8em"></span> </p>

          <p style="margin-top: 4em;margin-left: 0em;position: fixed"><select id="det-select" class="small"><option value='0' data-display="Detalle" >-- Sel Detalle --</option></select></p>
          <p style="margin-top: 6.5em;margin-left: 0em;position: fixed"><select id="ddsc-select" class="small"><option value='0' data-display="Descipción" >-- Sel Descripción --</option></select></p>


For the select container div (parent class), I have the following in CSS:

.padre {display: flex;justify-content: left;align-items: left;}

And finally I have this in css to handle the scrolling:

.nice-select.open .list { max-height: 300px; overflow-y: scroll; }

Any help is appreciated, the truth is that the css for me is a headache ..

asked by Mario Zanetta 26.11.2018 в 23:47

0 answers