Question

我的页面上有3个主要组件，分别是csslayouts，导航栏，标题栏和地图组件。导航栏是一系列内联本机选择，随着页面宽度的减小而换行。标题栏高度通常不会改变，我希望地图填充窗口的其余部分。

我添加了一些使用window.onresize处理高度的javascript（请参阅下面的代码），我还尝试使用onload调用来设置页面加载的高度，但这不是被调用或被覆盖。此外，我的CSS被编写为具有响应性，因此＆lt; 768px导航栏被拉出屏幕左侧并使用转换滑过主要内容以供选择，此时导航栏覆盖全屏。

这是添加窗口调整大小监听器的最佳方法吗？
以及如何设置初始地图高度？
我发现使用＆＃39; JavaScript.getCurrent.execute（...）;＆＃39;响应式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);

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

1 个答案: