Css 覆盖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>

---

有人知道一种不会弄乱HTML元素的解决方案吗？

另一种方法是使用“显示自定义气球”小部件，并相应地设置样式。然后，您可以处理导航图标“

MouseOverEvent

和

MouseOutEvent

来设置气球的内容、显示和隐藏气球。

您可以覆盖north 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>

.dockLayoutPanel>div{
溢出：可见！重要；
}
...

使用GWT 2.6.1进行测试

---

您可以在这里找到更多建议：

这是一个有效的选择，尽管我觉得依靠相对CSS定位将气球放在按钮旁边比通过JS计算坐标更安全。我看到了这一点（底部的答案）：基本上是说应该将导航面板的高度设置为100%：但是，我没有试过……谢谢@djjeck的帮助，为我工作：）

navigation.getElement().getParentElement().getParentElement().getStyle()
    .setOverflow(Overflow.VISIBLE);

<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>