覆盖gwt DockLayoutPanel小部件的溢出

我使用左侧的导航菜单创建一个页面,其中包含每个部分的图标。 页面布局看起来像这样:

  
    
    
      
        
      
    
  

将鼠标悬停在导航栏的每个图标上应显示一个包含该项目标题的气球以及一些子项目。 我通过CSS达到了效果,让每个气球相对于其图标的位置。

g:west元素呈现为

<div style="
    position: absolute;
    overflow: hidden;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 55px; ">

My problem is that overflow: hidden.

How do I tell the DockLayoutPanel that it is OK for the west element to overflow over the center element?

Edit: I found a workaround which is quite reliable

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

Does anybody know a solution which doesn't mess with HTML elements?

7
额外 编辑
意见: 1
谢谢@djjeck你的解决方法,为我工作:)
额外 作者 XioRcaL,
我看到了这个(底部的答案): github.com/gwtbootstrap/gwt-bootstrap/问题/ 231 基本上它是一个应该设置您的导航面板的高度为100%:然而,我没有尝试它...
额外 作者 AndreasS,

2 答案

您可以覆盖北部div的内联样式:


    .dockLayoutPanel > div {
        overflow: visible !important;
    }



    
     ...
    

通过GWT 2.6.1测试。

You could find more suggestions here: https://github.com/gwtbootstrap/gwt-bootstrap/issues/231

3
额外

另一种方法是使用 PopupPanel ,显示一个自定义的气球小部件,并据此设计样式。然后,您可以处理导航图标' MouseOverEventMouseOutEvent 以设置内容,显示和隐藏气球。

0
额外
这是一个有效的选择,尽管依靠相对CSS定位将我的气球放在按钮旁边,而不是通过JS计算坐标,我觉得更安全。
额外 作者 djjeck,
我会试一试。
额外 作者 djjeck,