Ваадин 8: Проблема с использованием гибкой упаковки с отзывчивым - PullRequest
Новая
       14

Ваадин 8: Проблема с использованием гибкой упаковки с отзывчивым

0 голосов
/ 14 апреля 2019

Я пытаюсь реализовать нечто подобное, как описано в Отзывчивый Vaadin: гибкая упаковка .

У меня есть вид с вертикальной компоновкой в ​​качестве основной компоновки.MainLayout имеет CssLayout в качестве компонента.Этот CssLayout состоит из двух компонентов: вертикальная раскладка для навигационных кнопок и панель.Горизонтальный макет навигационной кнопки имеет неопределенный размер и ширину панели 100%.

public class ViewName extends Panel implements View 

public ViewName() {
    setSizeFull();
    VerticalLayout mainLayout = new VerticalLayout();
    setContent(mainLayout);
    CssLayout dataLayout = new CssLayout();
    dataLayout.setWidth("100%");
    dataLayout.addStyleName("flexwrap");
    mainLayout.addComponent(dataLayout);
    dataLayout.setResponsive(true);

    VerticalLayout naviButtonLayout = new VerticalLayout();
    naviButtonLayout.setSizeUndefined();
    naviButtonLayout.addStyleName("navi");  
    dataLayout.addComponent(naviButtonLayout);
    //several buttons added to naviButtonLayout
    Panel dataPanel = new Panel();  
    dataLayout.addComponent(dataPanel);
    dataPanel.addStyleName("upanel");
    dataPanel.setWidth("100%");
}

Код SCSS выглядит следующим образом: 

.flexwrap {

}

.flexwrap[width-range~="0-1000px"] {
    .navi {width: 100%}
    .upanel {width: 100%}
}

.flexwrap[width-range~="1001px-"] {
    .navi {width:25%}
    .upanel {width: 75%}
}

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

dataPanel.setSizeUndefined();

, панель будет рядом с навигационными кнопками.Но он получает полосу прокрутки, которая мне не нужна.Руководство Vaadin гласит: «С помощью адаптивного расширения вы можете иметь более гибкое развертывание, обеспечивающее максимальную ширину плиток компонентов».

Я хочу, чтобы панель данных имела ширину 100%.Как мне этого добиться ??Что не так в моем коде?

Если это невозможно, что я могу использовать вместо "Vaadin отзывчивый", чтобы обернуть два компонента разного размера?Похоже, CSS flex-box для компонентов с одинаковым размером.

...