vaadin динамическая высота компонента с или без javascript

Question

У меня есть 3 основных компонента на моей странице: csslayouts, панель навигации, строка заголовка и компонент карты. Навигационная панель представляет собой ряд встроенных собственных выборок, которые обертываются при уменьшении ширины страницы. высота строки заголовка обычно не изменяется, и я хочу, чтобы карта заполнила оставшуюся часть окна.

Я добавил несколько javascript, который обрабатывает высоту с помощью window.onresize (см. Код ниже), и я также попытался использовать вызов 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 Script ,

Вот пример кода:

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