Vaadin - изменение размера макета перекрывается

Я столкнулся с проблемой перекрытия в моем проекте при попытке изменить размер браузера. Я пробовал так много разных вариантов, чтобы заставить его работать, но результат все равно неприемлем.

Перед изменением размера:  введите описание изображения здесь

A, B и C содержатся в VerticalLayout - я назову его root.

  • Корень находится внутри HorizontalLayout - содержимого UI.
  • A - простой компонент.
  • B расширяет VerticalLayout, который содержит 2 HorizontalLayout с внутри.
  • C - это всего лишь один компонент - Grid.

Теперь, когда я пытаюсь изменить размер своего браузера (как показывает стрелка), C начинает красть место для других компонентов.

После изменения размера:  введите описание изображения здесь

Я хотел бы добиться того, чтобы моя сетка (C) не соответствовала моему браузеру. Он не должен двигаться, а просто скрываться, как показано ниже (зеленый цвет показывает фактически видимую часть):

эффекта, которого я хотел бы достичь

    /*ROOT class that extends VerticalLayout*/
    private void init()
    {
        super.setSizeFull();

        addA();
        addB();
        addC();
    }

    private void addA()
    {
        Label header = new Label();

        super.addComponent(header);
        super.setComponentAlignment(header, Alignment.MIDDLE_CENTER);
    }

    private void addB()
    {
        layoutB.setSizeFull();
        layoutB.setWidth("92%");
        super.addComponentsAndExpand(layoutB);
        super.setExpandRatio(layoutB, 0.3f);
        super.setComponentAlignment(layoutB, Alignment.MIDDLE_CENTER);
    }

    private void addC()
    {
        grid.setSizeFull();
        grid.setColumnReorderingAllowed(true);

        grid.setWidth("92%");
        super.addComponentsAndExpand(grid);
        super.setExpandRatio(grid, 0.6f);
        super.setComponentAlignment(grid, Alignment.BOTTOM_CENTER);
    }

Как видите, C добавляется так же, как B, но перемещается только C. Заранее благодарю за любую помощь!

Я использую Vaadin 8.

@Редактировать:

@SpringUI(path = "/ui")
public class MyUI extends UI {

@Override
protected void init(VaadinRequest request) 
{
    Workspace workspace = new Workspace();

    HorizontalLayout root = new HorizontalLayout();
    root.setSizeFull();
    root.addComponentsAndExpand(workspace);

    setContent(root);
}

public class Workspace extends Panel
{
    public Workspace()
    {
        init();
    }

    private void init()
    {
        setSizeFull();
        addStyleName(ValoTheme.PANEL_BORDERLESS);

        VerticalLayout layout = new VerticalLayout();
        // by default width 100% and height undefined in Vaadin 8
        setContent(layout);

        // component A
        Label label = new Label("Test1");
        layout.addComponent(label);

        // component B
        HorizontalLayout bar = new HorizontalLayout();
        bar.addComponents(new Label("Label 1"), new Label("Label 2"));
        layout.addComponent(bar);

        // component C
        Grid<MyBean> grid = new Grid<>(MyBean.class);
        grid.setCaption("My Grid:");
        grid.setHeight("1000px");
        //grid.setHeightByRows(50); // same as fixed height
        List<MyBean> items = new LinkedList<>();
        IntStream.range(1, 100).forEach(i -> items.add(new MyBean("Item " + i)));
        grid.setItems(items);
        layout.addComponent(grid);
    }
}

    public static class MyBean {
        private String name;
        public MyBean(String name) { this.name = name; }
        public String getName() { return name; }
        public void setName(String name) { this.name = name; }
    }

}

person Dawid Fieluba    schedule 07.09.2017    source источник
comment
Прежде всего, я бы не рекомендовал создавать подкласс VerticalLayout, если вы его не расширяете - просто создайте новый экземпляр и добавьте свои компоненты. Ваша проблема должна заключаться в полноразмерном вертикальном макете. Попробуйте обернуть его в полноразмерный Panel, затем сделайте вертикальный макет полной шириной и неопределенной высотой. Другие компоненты в вашем вертикальном макете также должны иметь неопределенную высоту. Это позволит ему расти в высоту по мере необходимости.   -  person Steffen Harbich    schedule 14.09.2017
comment
Я пробовал сделать это, но его поведение остается прежним, независимо от того, оборачиваю ли я свой VerticalLayout в Panel. Я думаю, что эта проблема инициализируется на один уровень выше и зависит от содержимого HybridMenu - подробнее. Если HybridMenu высота содержимого не заполнена, он работает так, как я хочу, но тогда панель прокрутки не работает должным образом.   -  person Dawid Fieluba    schedule 14.09.2017
comment
Вы тестировали его без HybridMenu? Можете ли вы выложить полный код с панелью?   -  person Steffen Harbich    schedule 14.09.2017
comment
Ага, сначала было без HybridMenu. Похоже, что уровень выше не может быть полностью увеличен. Теперь я вижу, что если и HybridLayout контент, и HybridLayout являются полноразмерными, возникает проблема перекрытия. Если только 1 из них полностью заполнен, это нормально, но тогда я не могу прокручивать.   -  person Dawid Fieluba    schedule 14.09.2017


Ответы (1)


Взгляните на этот рабочий пример:

@SpringUI(path = "/ui")
public class MyUI extends UI {

@Override
protected void init(VaadinRequest request) {
    Panel panel = new Panel();
    panel.addStyleName(ValoTheme.PANEL_BORDERLESS);
    panel.setSizeFull();

    VerticalLayout layout = new VerticalLayout();
    // by default width 100% and height undefined in Vaadin 8
    panel.setContent(layout);

    // component A
    Label label = new Label("Test1");
    layout.addComponent(label);

    // component B
    HorizontalLayout bar = new HorizontalLayout();
    bar.addComponents(new Label("Label 1"), new Label("Label 2"));
    layout.addComponent(bar);

    // component C
    Grid<MyBean> grid = new Grid<>(MyBean.class);
    grid.setCaption("My Grid:");
    grid.setHeight("1000px");
    //grid.setHeightByRows(50); // same as fixed height
    List<MyBean> items = new LinkedList<>();
    IntStream.range(1, 100).forEach(i -> items.add(new MyBean("Item " + i)));
    grid.setItems(items);
    layout.addComponent(grid);

    setContent(panel);
}

public static class MyBean {
    private String name;
    public MyBean(String name) { this.name = name; }
    public String getName() { return name; }
    public void setName(String name) { this.name = name; }
}

}

Grid имеет фиксированную высоту (по пикселям или по количеству строк). Для VerticalLayout коэффициенты расширения не требуются. Макет в Panel будет увеличиваться по мере необходимости для его дочерних компонентов. Если высота больше, чем пространство, доступное для Panel, отображаются полосы прокрутки.

person Steffen Harbich    schedule 14.09.2017
comment
Что ж, у меня тоже работает, когда я делаю это таким образом, но проблема возникает, когда Panel не установлен напрямую как UI содержимое. Не могли бы вы попробовать еще один уровень? Это похоже на вставку Panel в HorizontalLayout, который является содержимым UI. Я вижу, что пропустил этот вопрос, потому что был уверен, что связи нет. - person Dawid Fieluba; 14.09.2017
comment
Будет проще, если вы измените мой пример и опубликуете его снова. - person Steffen Harbich; 14.09.2017
comment
Я пробовал ваш код, но проблем не вижу. Что именно не работает? Потенциальная проблема заключается в том, что HorizontalLayout не полной высоты (100%). Вы можете увидеть это в окно отладки клиента Vaadin. - person Steffen Harbich; 15.09.2017
comment
Да, извините, я забыл установить HorizontalLayout на полный размер. Можете ли вы сейчас увидеть перекрытие компонентов? - person Dawid Fieluba; 15.09.2017
comment
Нет, я изменил размер окна (firefox), нет перекрытия или других проблем с макетом. Не могли бы вы предоставить скриншоты? - person Steffen Harbich; 15.09.2017
comment
Я тестировал его с помощью firefox, и результат тот же. Добавил скриншоты. - person Dawid Fieluba; 15.09.2017
comment
На скриншотах показано ваше приложение. Вы воспроизвели проблему в моем примере кода, который вы изменили? Если да, добавьте для этого скриншоты, если нет, я могу помочь вам только в том случае, если вы предоставите весь код, необходимый для воспроизведения проблемы на моей машине. - person Steffen Harbich; 15.09.2017
comment
Хорошо, ваш пример отлично работает. Сейчас мне придется работать самостоятельно. Ты больше ничем мне не поможешь. PS. Моя сетка вызывает проблемы - person Dawid Fieluba; 15.09.2017