MaterialHeader paddingLeft can not be set

Question

I would like my MaterialHeader, and MaterialNavBar to layout to the left side of the page. Setting paddlingLeft(0) does nothing. No matter what paddingLeft is set to, GWT Material Design will always set the paddingLeft to the width of the side Nav. I am trying to have the navbar extend from left to right, with the SideNav underneath the nav bar.

    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);

When running this code, the navbar is always moved to the right by 280 pixels. And the Header html element has a padding-left value of 280 instead of zero.

Inspecting the html shows the header with a padding-left = 280px. That is the same as the width that I set the Side Nav to.

Am I doing something wrong? Thanks

Your `MaterialNavBar` is named as "b", but you used `navBar` in `header.add(navBar);`. Is it a typo? — brian17han, Aug 26 '17 at 03:23

score 1 · Answer 1 · answered Aug 26 '17 at 03:22

1

In order to put the MaterialSideNav underneath the top MaterialNavBar, you have to pick a SideNavType which implements HasWithHeader interface. It seems the best fit for your need is MaterialSideNavPush(SideNavType.PUSH_WITH_HEADER). Here is the GMD source code and demo.

According to GMD source code, your MaterialSideNav shouldn't live inside the MaterialHeader.

answered Aug 26 '17 at 03:22

brian17han

1,239
1
8
15

Thanks you are correct. The videos at GMD sent me in the wrong direction. They probably need updating. Thanks again. – Mike Warne Aug 27 '17 at 17:23

score 0 · Answer 2 · answered Oct 18 '17 at 23:41

Starting version 2 we separated our SideNav types into different classes for better implementation.

So as @brian17han suggested that is correct but need to upgrade that to v2 , here is a sample code

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

or java

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

For reference you can check all types in here https://gwtmaterialdesign.github.io/gwt-material-demo/#sidenavs

MaterialHeader paddingLeft can not be set

2 Answers2