Search code examples
jqueryhtmlcssbootstrap-selectpicker

bootstrap select dropdown can't follow the parent


I use the bootstrap-select picker to select picker option. When I scroll the container, drop-down struct with the top bar.it doesn't properly follow the parent element.

please check the codepen for it: https://codepen.io/Arunkarthik07/pen/bjOLYV

    .container{ 
      height: auto;
      overflow-y: scroll;
    } 
    <div>
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-brand mb-0 h1">Navbar</span>
    </nav>
    <div class="container">
     
    <select class="selectpicker">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Barbecue</option>
        <option>Mustard</option>
      <option>Ketchup</option>
      <option>Barbecue</option>
    </select>  
          
    <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>
     
    </div>
    </div>
    </div>

enter image description here


Solution

  • I did't get your question clearly. if you dropdown is stuck in the top of the body, that means x-out-of-boundaries is present on your dropdown menu. Please utilize this class to remove the transform, so it can follow the parent element

    //fix
    dropdown-menu[x-out-of-boundaries]{
       transform: translate3d(0px, 30px, 0px) !important; //give valid transform
    //or use visiblity hidden;
    }