表动态高度上的引导溢出 y 问题

Question

我对表格响应类有一些问题，因为它在 css 上未指示时会在 y 轴上生成滚动。

这是问题的图片，我也复制了这个错误

<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