Bootstrap проблема переполнения у таблицы Dynami c высота

Question

У меня есть некоторые проблемы с классом, реагирующим на таблицу, потому что он генерирует прокрутку по оси Y, когда он не указан на css.

Вот изображение проблемы , и я также реплицировал ошибка

<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/

Я пытался поставить overflow-y: visible, но, похоже, ничего не работает.

Я бы признателен, если кто-то может помочь мне исправить это.

Answer 1

Если мы изменим:

.multiselect__content-wrapper { display: contents; }

Он может расти внутри ячейки таблицы, но влияет на высоту стола.

---

Или если вы используете:

.table-responsive { overflow: unset; }

Может расти вне ячейки, не влияя на высоту стола.

---

Таким образом, чтобы исправить выпадающий список вне ячейки таблицы и сохранить переполнение на .table-responsive Я не верю, что это можно исправить только CSS. Сообщалось о JavaScript решениях:

• добавить некоторые нижние отступы (применимо, только если выпадающие списки находятся в последних строках)
• добавить раскрывающийся список к телу и пересчитать смещение
• добавить position: fixed при открытии и пересчитать width, left и right смещение

Итак, после некоторой борьбы с Vue (впервые) Я нашел решение, которое может удовлетворить ваши потребности. В этом решении используется position: fixed, как упоминалось ранее.

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`;
}

При добавлении события @open в настройку также требуется :id. По какой-то причине этот идентификатор должен быть цифрой c, я не знаю, почему на этом этапе. Возможно, потребуется дополнительная настройка, но, по крайней мере, это решит одну из самых больших проблем.

DEMO