如何让 vaadin-grid 填充页面答案

【问题标题】：How to get vaadin-grid to fill the page如何让 vaadin-grid 填充页面
【发布时间】：2016-03-16 20:58:56
【问题描述】：

我正在使用 vaadin-grid 元素（聚合物网络组件，而不是 java 网格）。我看到我可以通过visible-rows 属性设置网格上显示的行数。但是我找不到让网格占用所有可用空间的方法，即将行动态设置为填充页面所需的行。文档暗示这是可能的。 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>

【问题讨论】：

标签： polymer vaadin

【解决方案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

【讨论】：

在您的 jsbin 示例中，我仍然只看到 10 行显示，它并没有占用所有可用的垂直空间。
你用的是什么浏览器？我用 Chrome 49 进行了测试。
我使用的是 Firefox。没错，您的示例适用于 Chrome。谢谢！
Firefox 可能需要一些前缀 CSS 规则来实现 flex。