如何让vaadin-grid填充页面

Question

我正在使用 vaadin-grid 元素（聚合物网络组件，而不是 java 网格）。我看到我可以通过 visible-rows 属性设置网格上显示的行数。但是我找不到让网格占用所有可用 space 的方法，即将行动态设置为填充页面所需的行。文档暗示这是可能的。 demo expenses app 似乎也这样做，虽然我不知道在哪里。

这是一个非常简单的示例，无论页面大小如何，它始终显示 10 行。

<head>
    <script src="https://cdn.vaadin.com/vaadin-elements/latest/webcomponentsjs/webcomponents-lite.js"></script>
    <link href="https://cdn.vaadin.com/vaadin-elements/latest/vaadin-grid/vaadin-grid.html" rel="import">
</head>

<body>
<vaadin-grid>
    <table>
        <colgroup>
            <col>
            <col>
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>Name</th>
            <th>Value</th>
            <th>Progress</th>
        </tr>
        </thead>
        <tbody>
        <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
        <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
        <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
        <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
        <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
        <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
        <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
        <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
        <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
        <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
        <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
        <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
        <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
        </tbody>
    </table>
</vaadin-grid>
</body>

</html>

Answer 1

除了使用 visible-rows 属性外，您还可以使用普通 CSS 直接设置 height 属性。

您也可以像在费用管理器演示中那样使用 flex。

我稍微修改了您的代码，以举例说明如何使用 flex 属性。

   <head>
    <script src="https://cdn.vaadin.com/vaadin-elements/latest/webcomponentsjs/webcomponents-lite.js"></script>
    <link href="https://cdn.vaadin.com/vaadin-elements/latest/vaadin-grid/vaadin-grid.html" rel="import">
</head>

    <body style="display: flex; flex-direction: column">
    <div id="content" style="flex: 1">
      Some Content Here
    </div>
    <div id="container" style="flex: 3; display: flex">
    <vaadin-grid style="flex: 1">
        <table>
            <colgroup>
                <col>
                <col>
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>Name</th>
                <th>Value</th>
                <th>Progress</th>
            </tr>
            </thead>
            <tbody>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            <tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
            </tbody>
        </table>
    </vaadin-grid>
    </div>
    </body>

    </html>

您可以在此处的 jsbin 上实时试用：http://jsbin.com/kigonu/edit?html,css,output

如何让vaadin-grid填充页面

How to get vaadin-grid to fill the page

vaadin

polymer