Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

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

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

Vaadin grid element not showing in horizontal layout

M Wong
5 years ago Aug 08, 2016 12:52am

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

 

Teemu Pöntelin
5 years ago Aug 09, 2016 11:33am

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
5 years ago Aug 13, 2016 6:05pm

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