如何获取vaadin网格以填充页面
如何获取vaadin网格以填充页面
提问于 2016-03-16 20:58:56
我正在使用vaadin网格元素(聚合物web组件，而不是java网格)。我看到可以通过visible-rows属性设置网格上显示的行数。但我找不到一种方法让网格占用所有可用的空间，即动态地将行设置为填充页面所需的内容。文档表明这是可能的。演示费用应用程序似乎也能做到这一点，尽管我不知道它在哪里。
这里有一个非常简单的示例，它将始终显示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>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-03-20 21:08:45
除了使用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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36046801
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号