覆蓋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小部件的溢出

回答

相關問題