2017-08-24 5 views
1

MaterialHeaderとMaterialNavBarをページの左側にレイアウトしたいと思います。 paddlingLeft(0)は何もしません。 paddingLeftがどのように設定されていても、GWT Material Designは常にpaddingLeftをサイドナビゲーションの幅に設定します。私は、ナビゲーションバーの下にSideNavを付けて、Navbarを左から右に伸ばしてみようとしています。MaterialHeader paddingLeftを設定することができません

header = new MaterialHeader(); 
    header.setPaddingLeft(0); 
    MaterialNavBar b = new MaterialNavBar(); 
    b.setActivates("sideNav1"); 
    MaterialSideNav sideNavBar = new MaterialSideNav(SideNavType.FIXED); 
    sideNavBar.setWidth(280); 
    sideNavBar.setTop(64); 
    sideNavBar.setId("sideNav1"); 
    sideNavBar.setAlwaysShowActivator(true); 
    sideNavBar.setShowOnAttach(true); 
    header.add(navBar); 
    header.add(sideNav); 

このコードを実行すると、ナビゲーションバーは常に右側に280ピクセル移動します。また、Header html要素のパディング左値は0ではなく280です。

htmlを調べると、padding-left = 280pxのヘッダーが表示されます。これは、サイド・ナビゲーションを設定する幅と同じです。

何か間違っていますか?トップMaterialNavBarの下MaterialSideNavを置くために おかげ

+0

あなたの 'MaterialNavBar'の名前は" b "ですが、あなたは' header.add(navBar); 'に' navBar'を使っています。それはタイプミスですか? – brian17han

答えて

1

は、あなたがHasWithHeaderインターフェイスを実装SideNavTypeを選択する必要があります。あなたのニーズに最も適しているようです。​​(SideNavType.PUSH_WITH_HEADER)です。ここにGMD source codedemoがあります。


GMDのソースコードによると、あなたのMaterialSideNavMaterialHeaderの内側に住んではいけません。

+0

ありがとうございます。 GMDのビデオは私を間違った方向に送りました。彼らはおそらく更新する必要があります。再度、感謝します。 –

0

開始バージョン2では、より良い実装のために、SideNavタイプを異なるクラスに分けました。

ので、参考のために、@ brian17hanはそれが正しいことを示唆したが、V2にそれをアップグレードする必要があり、ここではサンプルコードがある

<m:MaterialSideNavPush withHeader="true" ... /> 

またはJava

MaterialSideNavPush sidenav = new MaterialSideNavPush(); 
sidenav.setHeader(true); 

として、あなたはここですべての種類を確認することができます https://gwtmaterialdesign.github.io/gwt-material-demo/#sidenavs

関連する問題