2012-05-21 12 views
7

各セクションのアイコンを含むナビゲーションメニューが左側にあるページを作成しています。 ページレイアウトは、このようなものになります。ナビゲーションバーのアイコンのそれぞれの上にマウスを移動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によって効果を達成しました。それぞれのバルーンにアイコンの位置を与えました。

グラム:

<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要素と混乱しない解決策を知っていますか?

+0

を私はこれ(下の答えを)見ました: https://github.com/gwtbootstrap/gwt-bootstrap/issues/231 基本的には1をSAIS しかし、私はそれを試していない... – AndreasS

+0

ありがとうあなたの回避策のための@djjeckは、私のために働いた:) – XioRcaL

答えて

3

あなたは北の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

0

代替バルーンウィジェットを表示するPopupPanelを使用することもできます。あなたのナビゲーションアイコンのMouseOverEventMouseOutEventを処理して、あなたの気球を表示、非表示にすることができます。

+0

私はバルーンネックスを置くための相対的なCSSの位置に頼ってより安全に感じるが、それは有効な代替手段です。 JSを介して座標を計算するのではなく、ボタンに移動します。 – djjeck

+0

私はそれを試してみましょう。 – djjeck

関連する問題