Question

我正在开发一个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上设置什么属性，让它占用内容视图中的空间，以便水平滚动不会出现在它下面。谢谢！

Answer 1

我为解决这个问题所做的是按如下方式构造代码。这将为包含我的过滤器组件和表的Panel创建一个垂直和水平滚动条。希望这可以帮助有类似问题的人。

@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

首先尝试通过调用setScrollable（true）方法使您的面板可滚动，但如果您使用setSizeFull（）将一些自定义布局设置为此面板新布局，则此方法无效。

如果您确切知道您的应用程序将在具有较小屏幕分辨率的设备中打开，您可以简单地为您的“主要”/“主要”布局设置一些固定的宽度和高度，或者添加一些CSS样式与params，如min- width：{some value} px，min-height：{some value} px。

Answer 5

根据这篇文章，我添加了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 6

我现在解决这个问题的唯一方法（v6.8.14）是以px值指定高度而不是％

Answer 7

始终使用CustomLayout。它更快，更有效，通过轻松控制html和css，您可以获得图形一致的结果

浏览器中没有垂直滚动

7 个答案: