覆盖gwt DockLayoutPanel小部件的溢出

Question

我正在创建一个左边有导航菜单的页面，其中包含每个部分的图标。页面布局如下所示：

  <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，西部元素溢出中心元素是可以的？

编辑：我找到了一个很可靠的解决办法

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

有谁知道一个不处理HTML元素的解决方案吗？

Answer 1

您可以重写北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

Answer 2

另一种选择是使用显示自定义气球小部件的PopupPanel，并相应地设置样式。然后，您可以处理导航图标的MouseOverEvent和MouseOutEvent，以设置气球的内容、显示和隐藏。