引导表，溢出 [英] Bootstrap-table, overflow

问题描述

我试过 Bootstrap-table (http://bootstrap-table.wenzhixin.net.cn/)，用于过滤和分页.

工作正常，但是当我在表格中放置下拉列表时，您必须滚动才能显示它.

<thead class="thead-inverse"><tr><th></th><第>日期</th><th>客户</th><th>数量</th><th>状态</th></tr></thead><tr><td>#</td><td><nobr>2015-03-03</nobr></td><td>测试</td><td><nobr>8 000,00</nobr></td><td>OK</td></tr><tr><td>#</td><td>2015-03-04</td><td>测试</td><td>433,33</td><td>OK</td></tr><tr><td><div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">行动<span class="caret"></span></a><ul class="下拉菜单"><li>第一个菜单项</li><li>第二个菜单项</li>
</td><td>2015-03-06</td><td>测试</td><td>33,12</td><td>OK</td></tr></tbody>

https://jsfiddle.net/qr3ao2e3/

你有什么解决办法吗?

解决方案

.fixed-table-body 类将 overflow X 和 Y 属性设置为 auto 意思是:

<块引用>

auto - 应该导致提供滚动机制溢出的盒子

修复它

.fixed-table-body {溢出-x:可见；溢出-y:可见；高度:100%；}

在此处查看更新的小提琴.希望有所帮助.

I've tried Bootstrap-table (http://bootstrap-table.wenzhixin.net.cn/), for filtering and pagination.

Works fine, but when I put a dropdown in the table you have to scroll to show it.

<table id="ex" class="table table-striped table-condensed table-hover">
  <thead class="thead-inverse">
    <tr>
      <th></th>
      <th>Date</th>
      <th>Customer</th>
      <th>Amount</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#
      </td>
      <td>
        <nobr>2015-03-03</nobr>
      </td>
      <td>Test</td>
      <td>
        <nobr>8 000,00</nobr>
      </td>
      <td>OK</td>
    </tr>
    <tr>
      <td>#</td>
      <td>2015-03-04</td>
      <td>Test</td>
      <td>433,33</td>
      <td>OK</td>
    </tr>
    <tr>
      <td>
        <div class="btn-group">
          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Action
        <span class="caret"></span>
    </a>
          <ul class="dropdown-menu">
            <li>First menu item</li>
            <li>Second menu item</li>
          </ul>
        </div>
      </td>
      <td>2015-03-06</td>
      <td>Test</td>
      <td>33,12</td>
      <td>OK</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/qr3ao2e3/

Do you have any solutions?

解决方案

The .fixed-table-body class has the overflow X and Y properties set to auto which means:

auto - Should cause a scrolling mechanism to be provided for overflowing boxes

This fixes it

.fixed-table-body {
    overflow-x: visible;
    overflow-y: visible;
    height: 100%;
}

See your updated fiddle here. Hope that helps.

这篇关于引导表，溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！