vaadin動態組件高度（帶有或不帶有javascript）

Question

我的頁面上有3個主要組件，分別是csslayouts，導航欄，標題欄和地圖組件。 導航欄是一系列嵌入式本機選擇，隨着頁面寬度的減小而自動換行。 標題欄的高度通常不會改變，我希望地圖填充窗口的其余部分。

我添加了一些使用window.onresize處理高度的JavaScript（請參見下面的代碼），並且我還嘗試使用onload調用來設置頁面加載時的高度，但這不是被調用就是被覆蓋。 另外，我的CSS被編寫為具有響應能力，因此<768px導航欄從屏幕的左側拉出，並使用過渡在主要內容上滑動以進行選擇，這時導航欄覆蓋了整個屏幕。

• 這是添加窗口大小調整偵聽器的最佳方法嗎？
• 以及如何設置初始地圖高度？
• 我通過使用'JavaScript.getCurrent.execute（...）;'找到了 方法響應式CSS無法正常運行

這是父級csslayout類的代碼段：

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

謝謝

Answer 1

我建議使用VerticalLayout並避免使用內聯Java腳本代碼。

這是代碼示例：

VerticalLayout l1 = new VerticalLayout();
l1.setSizeFull();
l1.addComponents(icon, navBar, header, worldMap);
l1.setExpandRatio(worldMap, 1);