Vaadin grid element not showing in horizontal layout

Flow
1

The Vaadin grid doesn’t display when inside a horizontal layout. I have 2 tables, one inside a horizontal layout and one not and the one inside the horizontal layout div displays only the vertical bar (in between the “before” and “after” text). See the following code and the attached screen shot:

[code]


before







after

<div>
  <vaadin-grid id="table2">
    <table>
      <colgroup><col><col><col></colgroup>
    </table>
  </vaadin-grid>
</div>

[/code]Is there a way to have the grid be inside a horizontal layout?

Your help is appreciated.

thanks,
Mona

26928.png

2

Hi,

I’m guessing you would like to have the
vaadin-grid
 element taking all the available horizontal space in the layout.

You should be able to achieve this by applying the class name
flex
 on the
div
 that containing
vaadin-grid
.

<div class="layout horizontal">
  before
  <div class="flex">
    <vaadin-grid id="table">
      <table>
        <colgroup><col><col><col></colgroup>
      </table>
    </vaadin-grid>
  </div>
  after
</div>
3

thank you Teemu, that worked beautiful! sorry I should have known that one…appreciate your help! you guys are awesome!