覆盖gwt DockLayoutPanel小部件的溢出

我使用左侧的导航菜单创建页面，其中包含每个部分的图标。页面布局看起来是这样的：覆盖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：西部元素被渲染为

<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元素？

来源

2012-05-21 djjeck

我看到这个（在底部的答案）： https://github.com/gwtbootstrap/gwt-bootstrap/issues/231 基本上它最高审计机关一个应设置您的导航面板的高度为100％：但是，我没有尝试过...... – AndreasS

谢谢@djjeck为你的解决方法，为我工作:) – XioRcaL

您可以覆盖北方的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

来源

2014-12-29 00:37:25 gingo

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

来源

2012-05-22 19:15:24

这是一个有效的替代品，但我觉得依靠相对CSS放置我的气球nex更安全t到按钮，而不是通过JS计算坐标。 – djjeck

我会试试看。 – djjeck

覆盖gwt DockLayoutPanel小部件的溢出

回答

相关问题