有或没有 javascript 的 vaadin 动态组件高度

Question

我的页面上有 3 个主要组件，它们都是 css布局、导航栏、标题栏和地图组件。导航栏是一系列内联本机选择，随着页面宽度的减小而换行。标题栏高度通常不会改变，我希望地图填充 window.

的剩余部分

我添加了一些 javascript 来使用 window.onresize 处理高度（参见下面的代码），我还尝试使用 onload 调用来设置页面加载时的高度，但这要么未被调用或正在被覆盖。此外，我的 CSS 是为了响应而编写的，因此 <768px 导航栏被拉出屏幕左侧，并使用过渡滑过主要内容以供选择，此时导航栏覆盖了整个屏幕。

这是添加 window 调整大小侦听器的最佳方式吗？
我该如何设置初始地图高度？
我发现通过使用 'JavaScript.getCurrent.execute( ... );' 方法，响应式 css 无法正常运行

这是来自 parent css 布局 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 );
}

谢谢

Answer 1

我建议使用 VerticalLayout 并避免使用内联 java 脚本代码。

这是代码示例：

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

有或没有 javascript 的 vaadin 动态组件高度

vaadin dynamic component height with or without javascript

javascript

java

vaadin