覆盖gwt DockLayoutPanel小部件的溢出
我使用左侧的导航菜单创建一个页面，其中包含每个部分的图标。 页面布局看起来像这样：
<g:DockLayoutPanel unit="PX">
<g:west size="55"><g:SimplePanel ui:field="navigation" /></g:west>
<g:center>
<g:ScrollPanel>
<g:Whatever ui:field="content" />
</g:ScrollPanel>
</g:center>
</g:DockLayoutPanel>
将鼠标悬停在导航栏的每个图标上应显示一个包含该项目标题的气球以及一些子项目。 我通过CSS达到了效果，让每个气球相对于其图标的位置。
g：west元素呈现为
<div style="
position: absolute;
overflow: hidden;
left: 0px;
top: 0px;
bottom: 0px;
width: 55px; ">
我的问题是overflow: hidden 。
我如何告诉DockLayoutPanel west元素溢出中心元素是可以的？
编辑：我发现了一个相当可靠的解决方法
navigation.getElement().getParentElement().getParentElement().getStyle()
.setOverflow(Overflow.VISIBLE);
有人知道一个解决方案不会混淆HTML元素吗？
您可以覆盖北部div的内联样式：
<ui:style>
.dockLayoutPanel > div {
overflow: visible !important;
}
</ui:style>
<g:DockLayoutPanel unit="PX" width="100%" height="100%" addStyleNames="{style.dockLayoutPanel}">
<g:north size="46">
...
</g:north>
</g:DockLayoutPanel>
通过GWT 2.6.1测试。
你可以在这里找到更多的建议：https：//github.com/gwtbootstrap/gwt-bootstrap/issues/231
另一种方法是使用PopupPanel显示一个自定义的气球控件，并相应地设置样式。 然后，您可以处理导航图标' MouseOverEvent和MouseOutEvent来设置，显示和隐藏气球的内容。