7

左側にナビゲーション メニューがあり、各セクションのアイコンを含むページを作成しています。ページ レイアウトは次のようになります。

  <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です。

west 要素が中央要素をオーバーフローしても問題ないことを DockLayoutPanel に伝えるにはどうすればよいですか?

編集： 非常に信頼できる回避策を見つけました

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

HTML要素を台無しにしないソリューションを知っている人はいますか?

4

2 に答える 2

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

于 2014-12-29T00:37:25.497 に答える
0

別の方法は、それに応じてスタイル設定されたカスタムバルーンウィジェットを表示するPopupPanelを使用することです。次に、ナビゲーションアイコンを処理MouseOverEventしMouseOutEvent、バルーンのコンテンツを設定したり、バルーンを表示および非表示にしたりできます。

于 2012-05-22T19:15:24.123 に答える