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

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

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

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

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, чтобы оно занимало место в представлении содержимого, чтобы горизонтальная прокрутка не появлялась под ним. Спасибо!

6
java vaadin vertical-scrolling

7 ответов

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

@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);

    }
7

все компоненты 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"));
}
}

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

3

добавьте это в ваш styles.css

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

прежде всего попробуйте сделать вашу панель прокручиваемой, вызвав метод setScrollable (true), но это не сработает, если вы установите пользовательский макет с setSizeFull () в качестве нового макета этой панели.

Если вы точно знаете, что приложение будет открыто в устройстве с небольшим разрешением экрана, вы можете просто установить для своего "основного"/"основного" макета некоторую фиксированную ширину и высоту или добавить стиль CSS с параметрами, такими как min-width: {some value} px, min-height: {some value} px.

1

основываясь на этом посте, я добавил 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);>
1

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

0

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

0