DataTables升级后按钮组下拉菜单hover宽度过大问题咨询

问题描述 #

升级DataTables后出现旧版本未有的样式兼容问题：基于Bootstrap 4主题搭建的自定义DataTable中，按钮组下拉菜单在hover时背景会超出容器范围。经排查，问题由DataTables内置样式 div.dt-button-collection .dt-button {min-width: 200px;} 导致。

版本信息 #

旧版本 #

由DataTables下载构建器生成，包含以下库：

• JSZip 2.5.0
• DataTables 1.10.18
• Buttons 1.5.6
• Flash export 1.5.6
• HTML5 export 1.5.6
• Print view 1.5.6
• ColReorder 1.5.0
• FixedHeader 3.1.4
• KeyTable 2.5.0
• Responsive 2.2.2
• RowReorder 1.2.4
• Scroller 2.0.0
• Select 1.3.0

新版本 #

由DataTables下载构建器生成，包含以下库：

• JSZip 2.5.0
• DataTables 1.12.1
• Buttons 2.2.3
• HTML5 export 2.2.3
• Print view 2.2.3
• ColReorder 1.5.6
• DateTime 1.1.2
• FixedHeader 3.2.4
• KeyTable 2.7.0
• Responsive 2.3.0
• RowReorder 1.2.8
• Scroller 2.0.7
• SearchBuilder 1.3.4
• SearchPanes 2.0.2
• Select 1.4.0

临时解决方案 #

通过添加自定义样式覆盖内置规则：

/* override */
div.dt-button-collection .dt-button {
  min-width: auto !important;
}

疑问 #

上述覆盖方案是否可行？该问题是否属于需要向DataTables官方上报的破坏性变更问题？

内容的提问来源于stack exchange，提问作者Gregory Bologna