css - Bootstrap overflow y 表动态高度问题

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

可以grow inside表格单元格但影响表格高度。

---

或者如果你使用:

.table-responsive { overflow: unset; }

可以grow outside不影响表格高度的单元格。

---

因此，要修复表格单元格外的下拉列表并在 .table-responsive 上保持溢出，我不认为这只能通过 CSS 修复。 JavaScript 解决方案已报告给:

• 添加一些底部填充(仅当下拉列表位于最后一行时适用)
• append the dropdown to the body并重新计算偏移量
• 打开时添加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。由于某种原因，这个 id 需要是数字，我现在不知道为什么。它可能需要一些额外的微调，但至少它解决了一个更大的问题。

DEMO