gwtgwt-material-design

Cannot set the height of MaterialSlider - How to override CSS?


Somewhere in materialize.min.css the slider class is getting its height assigned. I am simply not able to override this.

What I tried is to set the height in the constructor of my widget:

public class HomeViewImpl extends Composite implements HomeView {

    public HomeViewImpl() {

        initWidget(uiBinder.createAndBindUi(this));     

        int height = Window.getClientHeight();
        slider.getElement().getStyle().setHeight(height, Unit.PX);
    }
}

I also tried to overwrite it in my own css file and I also tried to override Widget.onLoad() with the same result. I can resize the slider afterwards but not on when its actually loaded. Since I want it to use up the entire available space it has to be resized "on load".

Please note that setting fullscreen="true" is not an option since this would mess up the arrangement of my parallax effect I am using here as well.

<m:MaterialSlider ui:field="slider" fullscreen="false">

    <m:MaterialSlideItem height="100%">
        <m:MaterialImage url="http://mayastepien.nl/googlecalendar/google-drinks.jpg" />
        <m:MaterialSlideCaption textAlign="CENTER">
            <m:MaterialTitle title="This is our big Tagline" description="Here's our small slogan." />
        </m:MaterialSlideCaption>
    </m:MaterialSlideItem>

    <m:MaterialSlideItem height="100%">
        <m:MaterialImage url="http://dreamatico.com/data_images/car/car-1.jpg" />
        <m:MaterialSlideCaption textAlign="CENTER">
            <m:MaterialTitle title="This is our big Tagline" description="Here's our small slogan." />
        </m:MaterialSlideCaption>
    </m:MaterialSlideItem>

</m:MaterialSlider>

Solution

  • According to the source code in

    https://github.com/GwtMaterialDesign/gwt-material/blob/master/gwt-material/src/main/java/gwt/material/design/client/ui/MaterialSlider.java

    ..you can set the height attribute on MaterialSlider too (in your UiBinder xml).

    You probably know this, but relative height only works when the height of parent elements is set too.

    See for instance Make div 100% height of browser window