包含按钮下拉列表的行在启用 scrollX 时会导致垂直滚动
Row containing a button dropdown causes vertical scrolling when scrollX is enabled
我有一个数据table,由于显示的列数,它启用了 scrollX。 table 行包含一个包含多个项目的 bootstrap 按钮下拉菜单。选择下拉菜单时启用滚动,很难选择正确的操作。选择下拉菜单时如何调整视口大小,以便不显示垂直滚动?
jsfiddle 是 https://jsfiddle.net/darwinaero/q9mLg375/15/
$(function() {
$('#tblTest').DataTable({
dom: 'Blfrtip',
scrollX: true,
paging: true,
responsive: true
});
});
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<table id="tblTest">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
</tr>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
你有我能想到的三个选项:
- 为
div.dataTables_scrollBody
元素用 css and/or javascript 覆盖 overflow
。
- 将 datatables-settings 中的
scrollY
设置为固定值(例如 600,对于 600px)。
- 编写您自己的 dropdown-element 呈现打开的 dropdown-list outside/above table-element.
前两个方案可以实现quiet simple。
这是选项 1 的示例:
由于将溢出设置为可见会产生一些我们通常不想要的损坏 scroll-behavior,我们必须从 bootstrap 下拉列表中监听事件并应用 overflow-style 即时.
$(function() {
$('#tblTest').DataTable({
dom: 'Blfrtip',
scrollX: true,
paging: true,
responsive: true
});
$('#tblTest').on('show.bs.dropdown', function () {
$('.dataTables_scrollBody').addClass('dropdown-visible');
})
.on('hide.bs.dropdown', function () {
$('.dataTables_scrollBody').removeClass('dropdown-visible');
});
});
div.dataTables_scrollBody.dropdown-visible {
overflow: visible !important;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<table id="tblTest">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
<th>Col8</th>
<th>Col9</th>
<th>Col10</th>
<th>Col11</th>
<th>Col12</th>
<th>Col13</th>
<th>Col14</th>
<th>Col15</th>
<th>Col16</th>
</tr>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some data</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
对我来说最简单的解决方法是为 dataTables_scrollBody 设置最小高度。您可以根据下拉列表中的项目列表增加最小高度。只需将其添加到您的样式表即可。
.dataTables_scrollBody {
min-height: 250px !important;
}
使用属性 data-container="body"
<select data-container="body">
...
</select>
我有一个数据table,由于显示的列数,它启用了 scrollX。 table 行包含一个包含多个项目的 bootstrap 按钮下拉菜单。选择下拉菜单时启用滚动,很难选择正确的操作。选择下拉菜单时如何调整视口大小,以便不显示垂直滚动?
jsfiddle 是 https://jsfiddle.net/darwinaero/q9mLg375/15/
$(function() {
$('#tblTest').DataTable({
dom: 'Blfrtip',
scrollX: true,
paging: true,
responsive: true
});
});
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<table id="tblTest">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
</tr>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
你有我能想到的三个选项:
- 为
div.dataTables_scrollBody
元素用 css and/or javascript 覆盖overflow
。 - 将 datatables-settings 中的
scrollY
设置为固定值(例如 600,对于 600px)。 - 编写您自己的 dropdown-element 呈现打开的 dropdown-list outside/above table-element.
前两个方案可以实现quiet simple。
这是选项 1 的示例:
由于将溢出设置为可见会产生一些我们通常不想要的损坏 scroll-behavior,我们必须从 bootstrap 下拉列表中监听事件并应用 overflow-style 即时.
$(function() {
$('#tblTest').DataTable({
dom: 'Blfrtip',
scrollX: true,
paging: true,
responsive: true
});
$('#tblTest').on('show.bs.dropdown', function () {
$('.dataTables_scrollBody').addClass('dropdown-visible');
})
.on('hide.bs.dropdown', function () {
$('.dataTables_scrollBody').removeClass('dropdown-visible');
});
});
div.dataTables_scrollBody.dropdown-visible {
overflow: visible !important;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<table id="tblTest">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
<th>Col8</th>
<th>Col9</th>
<th>Col10</th>
<th>Col11</th>
<th>Col12</th>
<th>Col13</th>
<th>Col14</th>
<th>Col15</th>
<th>Col16</th>
</tr>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some data</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
对我来说最简单的解决方法是为 dataTables_scrollBody 设置最小高度。您可以根据下拉列表中的项目列表增加最小高度。只需将其添加到您的样式表即可。
.dataTables_scrollBody {
min-height: 250px !important;
}
使用属性 data-container="body"
<select data-container="body">
...
</select>