CODEWITHSUNDEEP
htmlcssbootstrap-4bootstrap-selectbootstrap-selectpicker
Daniele
Daniele

Reputation: 69

Bootstrap-select in responsive table, page always scroll up

I have a bootstrap-select inside a td of a table-responsive table. If I click on the select-picker, dropdown menu is not entirely visibile (visibility is limited by table margin). If I add data-container="body" (or another element in data-container, as official guidelines), page automatically go on top and every time I have to scroll down up to the table (with dropdown correctly opened and visible).

<div class="table-responsive">  
  <table class="table" id="table">     
    <thead>
      <tr class="d-flex">
      <!-- others -->    
    </thead>    
    <tbody id="participants">
     <!-- others -->
      <td class="col-3">
        <select class="selectpicker" multiple data-live-search="true">
        <!-- options -->
        </select>
      </td>    
     </tbody>   
   </table>
</div>

Upvotes: 1

Views: 1730

Answers (1)

Hamzeh
Hamzeh

Reputation: 311

You didn't follow the bootstrap and table structures. I replaced the modified code:

<div class="container">
    <table class="table table-sm">
        <thead>
        <tr>
            <th scope="col">#</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">
                <select class="selectpicker form-control" multiple data-live-search="true">
                    <option>one</option>
                    <option>two</option>
                    <option>three</option>
                </select>
            </th>
        </tr>
        </tbody>
    </table>
</div>

Upvotes: 1

Related Questions