vaadin-grid height

Flow
1

Hi, I am new to your components and I integrated today a into a Polymer 1.3 application.
Before even starting I have a concern regarding styling the grid height.


Example 01:

I declare a simple component and I include an empty Grid

<dom-module id="myGrid">
<template>
   <vaadin-grid></vaading-grid>
</template>
<dom-module/>

When it renders, the height of the grid is almost 300px even if the grid is empty. Now, I want the grid to “shrink” up to a maximum height or show only the header if it’s empty. Can I use Polymer flex classes or do you have some custom methods?

2

Hi,

You should be able to set the height using CSS to 100% for instance, and then set the max-height to some other value.

By default, vaadin-grid reserves space for 10 rows of data, and you can affect that by either using the “visible-rows” attribute or CSS height.

Here’s a Codepen showing how to do it:
http://codepen.io/anon/pen/QNEaWR