Bootstrap overflow y problem on table dynamic height

Question

I have some problem with table-responsive class because it is generating scroll on y axis when it is not indicated on the css.

Here is picture of the problem and I also replicated the bug

<div id="app">
  <div class="container">
    <div class="table-responsive">
       <table class="table table-bordered">
        <thead>
          <tr>
            <th>N°</th>
            <th>Test</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>
              <multiselect 
                v-model="value" 
                :options="options"
                :multiple="true"
                track-by="library"
                :custom-label="customLabel"
                >
              </multiselect>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

https://jsfiddle.net/ggalvez92/3d8h4sqy/

I have tried to put overflow-y: visible but nothing seems to work.

I would appreciate if someone can help me to fix it.

Answer 1

If we change:

.multiselect__content-wrapper { display: contents; }

It can grow inside the table cell but affecting the table height.

---

Or if you use:

.table-responsive { overflow: unset; }

It can grow outside of the cell without affecting the table height.

---

So to fix the dropdown outside the table cell and keep overflow on the .table-responsive I don't believe this can be fixed CSS only. JavaScript solutions have been reported to:

• add some bottom padding (only applicable when the dropdowns are on the last rows)
• append the dropdown to the body and recalculate the offset
• add position: fixed when open, and recalculate width, left and right offset

So, after some struggle with Vue (first time) I've found a solution that might suit your needs. This solution uses the position: fixed as mentioned earlier.

repositionDropdown (id){
    const el = document.getElementById(id);
    const parent = el.closest('.multiselect');
    const content = parent.querySelector('.multiselect__content-wrapper');
    const { top, height, left } = parent.getBoundingClientRect();

    content.style.width = `${parent.clientWidth}px`;
    content.style.position = 'fixed';
    content.style.bottom = 'auto';
    content.style.top = `${top + height}px`;
    content.style.left = `${left}px`;
}

By adding the @open event to the setup it also requires an :id. For some reason this id needs to be numeric, I don't know why at this point. It might need some extra finetuning but at least it solves one of the bigger issues.

DEMO