Vaadin grid element not showing in horizontal layout

M Wong

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:

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

Is there a way to have the grid be inside a horizontal layout?

Your help is appreciated.

thanks,
Mona

Screen Shot 2016-08-07 at 5.50.35 PM.png (32.2 kB)

Teemu Pöntelin

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>

M Wong

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

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Vaadin grid element not showing in horizontal layout

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

Vaadin grid element not showing in horizontal layout

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.