auto resizing of element on window load & resize

Vaadin 6 / 7 / 8
1

I have 3 primary components on my page all are csslayouts, a nav bar, a title bar and the map component. The nav bar is a series of inline native selects that wrap as the page width decreases. the title bar height doesn’t generally change and I want the map to fill the remainder of the window.

I have added some javascript which handles the height using window.onresize (see code below) and I also attempted to use the onload call to set the height on page load, but this is either not being called or is being overwritten. In addition my CSS is written to be responsive, so <768px the nav bar is pulled off screen to the left and uses transition to slide over the main content for selection, at this point the nav bar covers full screen.

  2. Is this the best way to add in a window resize listener?
  3. and how would I go about setting the initial map height?
  4. I am finding that by using the ‘JavaScript.getCurrent.execute( … );’ method the responsive css is not operating correctly

here is the snippet from the parent csslayout class:

    // style: map
    private LMap worldMap = new LMap();
    private DataObjectService conn;
    private Integer appId, viewId, bAppId, bViewId;

    public MainContent( UserSession userSession )
    {
        setStyleName( "main-content" );
        setSizeFull();
        this.appId = userSession.getFragment()[0]
;
        this.viewId = userSession.getFragment()[1]
;
        conn = new DataObjectService( userSession.getResourceFactory() );        
        load();
    }
    private void load()
    {
       // style: nav-bar
       NavBar navBar = new NavBar( this );
       // style: nav-icon
       MenuIcon icon = new MenuIcon( navBar );
       // style: header-row
       HeaderRow header = new HeaderRow( "Your locations" );
       LZoom zoom = new LZoom();
       zoom.setPosition( ControlPosition.topright );
       worldMap.addControl( zoom );
       worldMap.setStyleName( "map" );
       updateMap();
       addComponents( icon, navBar, header, worldMap );
               
        String setMapHeightFunc = "function setMapHeight() {"
               + " var win = window.innerHeight;"
               + "    var nav = document.getElementsByClassName( 'nav-bar' )[0]
.offsetHeight;"
               + "    var head = document.getElementsByClassName( 'header-row' )[0]
.offsetHeight;"
               + "    var rest = win - ( nav + head );"
               + " console.log( rest );"
               + "    document.getElementsByClassName( 'map' )[0]
.style.height = rest + 'px';"
               + " };";
   
        String jsTest = "window.onresize = setMapHeight;"
                     + "window.onload = setMapHeight;";
        String func = setMapHeightFunc + jsTest;
       
        JavaScript.getCurrent().execute( func );
   }

Thank you
23412.jpg
23413.jpg