设置vaadin表高度以适合内容

gda*_*imi 5 css vaadin

我在项目中使用CustomLayout来分隔UI对象和它们的样式.

我有桌子的问题.

我定义了一个div,我希望将表的高度设置为div的高度.

哪种方式最好?

我想:

table.setsizeFull() ;
table.setPageLength(0);
Run Code Online (Sandbox Code Playgroud)

在代码中,但结果不是我想要的.我希望桌子在div的尺寸中全尺寸,内部有或没有元素.

有什么建议?

Kim*_*son 10

我正在解决一个类似的问题:我想要一个表增长,因为我添加了行.我不关心它的确切高度,只要它显示所有数据行,并随着我添加行而增长.我还希望桌子总是在底部显示一些额外的空间.

这里的核心思想是我做了三件事:

  • 不要叫setHeight()桌子.
  • 我曾经setPageLength()用行来定义表高度 - 表应该是多少行.
  • 我打电话requestRepaint()给我调整大小的元素.如果我调整了列元素的大小,我在列元素上调用它.如果我调整了表格的大小,我就把它称为桌面.

这是一个通用的代码示例,显示了我是如何解决这个问题的.我的代码不完整,但它可能会帮助您入门.

public class MyClass extends Table {

    public MyClass(...)
    {
        this.setWidth("100%"); // fill parent <td>'s width, allows draggable sizing.
        // note: do NOT setHeight().

        setupColumns(); // details not shown here
        setupBehavior(); // details not shown (listeners, etc)
        addDataToTable(); // details not shown

        adjustHeight();
    }

    // I also have a function to add rows to the table when 
        // a button is clicked.  That function calls adjustHeight() (shown below).

    public void adjustHeight()
    {
        this.setPageLength(this.getItemIds().size() + 1);
        this.requestRepaint();
    }
}
Run Code Online (Sandbox Code Playgroud)

[EDIT/FOLLOW-UP]我发现如果使用setColumnExpandRatio()(动态列宽),使用此方法往往会导致在表上呈现不必要的滚动条.所以就像单挑一样,setColumnWidth()如果你使用我上面展示的技巧,你应该使用固定宽度的列().