6

我正在开发一个 Vaadin 应用程序，并且在获得我想要的布局的某些方面时遇到了极大的困难。现在的主要问题是，无论内容有多大或浏览器窗口有多小，我似乎都无法在我的布局中获得垂直滚动。

我已经阅读了这个主题，我知道 hLayout 和 vLayout 不支持滚动条，但 Panel 支持。我尝试了许多不同的组合以使其工作，但我只设法生成一个水平滚动条，但从来没有生成一个垂直滚动条。

另一个问题是我在公司提供的现有“模板”中构建应用程序。此模板包含一个包含一些版权信息的页脚。关于我正在添加的内容，此页脚似乎没有占用浏览器窗口中的任何空间，这导致在较小的屏幕上查看时水平滚动条出现在页脚“下方”，无法访问......我'将提供一些现在看起来如何的代码。

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 上设置什么属性，让它占据内容视图中的空间，这样水平滚动就不会出现在它的下方。谢谢！

4

7 回答 7

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

    }
于 2011-10-17T08:54:08.897 回答
3

所有 Vaadin 组件的大小默认都是未定义的，所以通常不需要调用 method 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布局中移除，那么它的大小不受限制（默认情况下）并且向下增长 - 然后只出现整个窗口的滚动条。

于 2013-05-05T12:57:40.137 回答
2

将此添加到您的styles.css

.v-verticallayout > div {
    overflow-y: auto ! important;
}
于 2012-11-14T20:43:30.907 回答
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);>
于 2012-05-22T19:50:31.557 回答
1

首先尝试通过调用 setScrollable(true) 方法使您的面板可滚动，但是如果您使用 setSizeFull() 设置一些自定义布局作为此面板的新布局，这将不起作用。

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

于 2011-10-14T17:45:03.450 回答
0

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

于 2014-04-09T11:51:44.503 回答
0

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

于 2015-11-13T18:39:27.817 回答