Нет вертикальной прокрутки в браузере

Question

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

Я прочитал эту тему и знаю, что hLayout и vLayout не поддерживают полосы прокрутки, но Panel поддерживает. Я пробовал во многих различных комбинациях заставить его работать, но мне удалось создать только горизонтальную полосу прокрутки, но не вертикальную.

Другая проблема заключается в том, что я создаю приложение внутри существующего «шаблона», предоставленного компанией. Этот шаблон содержит нижний колонтитул, содержащий некоторую информацию об авторских правах. Этот нижний колонтитул, по-видимому, не занимает места в окне браузера в отношении содержимого, которое я добавляю, что приводит к тому, что при просмотре на небольших экранах горизонтальная полоса прокрутки появляется «под» нижним колонтитулом, недоступна ... I ' Я приведу часть кода того, как это выглядит сейчас.

public class InventorySimCardTable extends M2MViewBase { //M2MViewBase extends VerticalLayout

    private final SPanel mainContent = Cf.panel("");
    private final SPanel tabPanel = Cf.panel("");
    private final SVerticalLayout tabcontent = Cf.vLayout();
    protected InventoryFilterPanel inventoryFilterPanel;

    @Override
    protected void initComponent() {
        setSizeFull();
        tabPanel.setSizeFull();
        tabPanel.getContent().setSizeUndefined();

        Table simCardTable = new Table();
        simCardTable.setWidth("1898px");
        simCardTable.setPageLength(15);

        tableContainer.setSizeUndefined();
        tableContainer.addComponent(simCardTable);

        mainContent.setWidth("99%");
        mainContent.setHeight("100%");
        mainContent.setContent(tableContainer);
        mainContent.setScrollable(true);

        centeringlayout.setSizeFull();
        centeringlayout.addComponent(mainContent);
        centeringlayout.setComponentAlignment(mainContent, Alignment.MIDDLE_CENTER);

        tabPanel.addComponent(centeringlayout);

        addComponent(tabPanel);

    }
}

Я хотел бы знать, видит ли кто-нибудь очевидные ошибки в моем коде. И если кто-нибудь знает, какое свойство я могу установить в CSS нижнего колонтитула, чтобы оно занимало пространство в представлении содержимого, чтобы горизонтальная прокрутка не появлялась под ним. Спасибо!

Answer 1

Что я сделал, чтобы решить эту проблему, так это структурировать код следующим образом.Это создаст вертикальную и горизонтальную полосу прокрутки для панели, содержащей мой компонент фильтра и таблицу.Надеюсь, это может помочь кому-то с подобной проблемой.

@Override
    protected void initComponent() {

        super.initComponent();

        if(!tableCreated) {
            createSimCardsTable();
            tableCreated = true;
        }

        mainWindow = this.getWindow();
        Panel basePanel = new Panel("");

        basePanel.addComponent(inventoryFilterPanel);
        AbstractComponent separatorLine = Cf.horizontalLine(); //Of no signficance
        separatorLine.addStyleName("m2m-horizontal-line-list-separator");
        separatorLine.setWidth("99%");
        basePanel.addComponent(separatorLine);
        basePanel.addComponent(simCardTable);
        basePanel.setSizeFull();
        basePanel.getContent().setSizeUndefined(); // <-- This is the important part

        addComponent(basePanel);
        setExpandRatio(basePanel, 1);

    }

Answer 2

Размер всех компонентов Vaadin по умолчанию не определен, поэтому обычно нет необходимости вызывать метод setSizeUndefined().Также нет необходимости вызывать setScrollable(true), потому что он допускает только программную возможность прокрутки.

Когда я пытался осмыслить внешний вид прокрутки, я написал простой скелет макета.Попробуйте это как содержимое основного окна:

import com.vaadin.ui.HorizontalSplitPanel;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.VerticalLayout;

public class Skeleton extends VerticalLayout {

public Skeleton() {
    setSizeFull();

    addComponent(new Label("Header component"));

    HorizontalSplitPanel splitPanel = new HorizontalSplitPanel();
    Panel leftComponent = new Panel();
    Panel rightComponent = new Panel();
    splitPanel.setFirstComponent(leftComponent);
    splitPanel.setSecondComponent(rightComponent);
    for (int i = 0 ; i < 200 ; i ++) {
        leftComponent.addComponent(new Label("left"));
        rightComponent.addComponent(new Label("right"));
    }

    leftComponent.setSizeFull();
    rightComponent.setSizeFull();

    addComponent(splitPanel);
    setExpandRatio(splitPanel, 1);

    addComponent(new Label("Footer component"));
}
}

Вы должны увидеть полосы прокрутки внутри вложенных панелей.Но если setSizeFull() удаляется из макета Skeleton, то он не ограничивается по размеру (по умолчанию) и увеличивается вниз - тогда появляется только полоса прокрутки всего окна.

Answer 3

Добавьте это к вашему styles.css

.v-verticallayout > div {
    overflow-y: auto ! important;
}

Answer 4

Основываясь на этом посте, я добавил vertical.setSizeUndefined(); и начал видеть вертикальные полосы прокрутки.

setMainWindow(new Window(title ));

vertical.setSizeFull();
vertical.setHeight("100%");

toolbar = createToolbar();
vertical.addComponent(toolbar);
vertical.setExpandRatio(toolbar, 0.03f);

Component tree = buildTree();
vertical.addComponent(tree);
vertical.setExpandRatio(tree, 0.97f);
vertical.setSizeUndefined();
getMainWindow().setContent(vertical);>

Answer 5

Прежде всего, попытайтесь сделать прокручиваемую панель, вызвав метод setScrollable (true), но это не сработает, если вы установите какой-либо пользовательский макет с помощью setSizeFull () в качестве нового макета этой панели.знайте, что ваше приложение будет открыто на устройстве с небольшим разрешением экрана, вы можете просто установить для своего «основного» / «основного» макета некоторую фиксированную ширину и высоту или добавить некоторый стиль CSS с такими параметрами, как min-width: {некоторое значение}px, min-height: {некоторое значение} px.

Answer 6

Всегда используйте CustomLayout. Это быстрее, эффективнее, и, легко управляя html и css, вы можете получить графически согласованный результат

Answer 7

Единственный способ исправить это сейчас (v6.8.14) - это указать высоту в значениях px вместо%