GWT ButtonBar Toolbar在Chrome显示为下拉菜单 其他浏览器显示正常 如何解决

问题原因 #

Chrome近期版本更新了内置的布局计算逻辑，和Edge的默认样式优先级、宽度计算容错规则产生差异，触发了你所用的GXT（Ext GWT）组件库中ToolBar的默认溢出收拢逻辑，才会出现之前正常、现在所有按钮被收进>>按钮的情况。

解决方案 #

方案1：关闭ToolBar自动溢出折叠（最推荐） #

直接调用ToolBar的内置方法关闭溢出折叠功能，修改后所有按钮都会强制平铺展示：

ToolBar toolBar = new ToolBar();
toolBar.add(okButton);
toolBar.add(cancelButton);
toolBar.add(addButton);
toolBar.add(deleteButton);
toolBar.add(copyButton);
// 新增下面这行即可
toolBar.setEnableOverflow(false);

方案2：强制指定容器宽度 #

手动指定ToolBar和父级按钮栏的宽度，避免宽度计算不足触发折叠：

// 给ToolBar设置100%宽度占满父容器
toolBar.setWidth("100%");

FramedPanel panel = new FramedPanel();
panel.setHeading(p_ChartDTO.getChartName() + " - Chart Series");
panel.add(m_ChartQueryGrid);
// 给父级按钮栏也设置100%宽度，避免父容器宽度限制
panel.getButtonBar().setWidth("100%");
panel.getButtonBar().add(toolBar);
panel.setSize("800px", "350px");

方案3：CSS样式强制覆盖 #

如果代码修改不生效，可以添加全局样式覆盖组件默认规则：

.x-toolbar {
  overflow-x: visible !important;
  flex-wrap: nowrap !important;
}
.x-toolbar-more-button {
  display: none !important;
}

效果对比 #

Edge正常显示效果：

Chrome当前异常显示效果：

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