覆盖 gwt DockLayoutPanel 小部件的溢出答案

【问题标题】：Override overflow for gwt DockLayoutPanel widgets覆盖 gwt DockLayoutPanel 小部件的溢出
【发布时间】：2012-05-28 05:34:45
【问题描述】：

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

  <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 元素混淆的解决方案吗？

【问题讨论】：

我看到了这个（答案在底部）：github.com/gwtbootstrap/gwt-bootstrap/issues/231 基本上它应该将导航面板的高度设置为 100%：不过我没试过……
感谢@djjeck 的解决方法，为我工作:)

标签： css gwt overflow uibinder docklayoutpanel

【解决方案1】：

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

【讨论】：

这是一个有效的选择，虽然我觉得依靠相对 CSS 定位将我的气球放在按钮旁边更安全，而不是通过 JS 计算坐标。

【解决方案2】：

你可以覆盖北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

【讨论】：