How to use a css grid in Vaadin Flow as replacement for Framework 8's GridLayout?

Question

I'm trying to migrate an existing Vaadin 8 application to Vaadin 12 and need to know how to recreate the functionality of Vaadin 8's GridLayout in Vaadin 12.

According to Vaadin Docs a GridLayout can be replaced in Vaadin 12 by: "Use Div together with the new CSS Grid functionality that is supported in most browsers"

Unfortunately it's not totally clear how exactly this can be done.

Lets assume that I have a Vaadin composite "HelloGrid":

@StyleSheet("styles/hello-grid.css")
public class HelloGrid extends Composite<Div> {

   public HelloGrid(){

     // EDIT: This line is my solution to the question
     getElement().getClassList().add("hello-grid");

     Label labelOne = new Label();
     labelOne.addClassName("label-one");

     Label labelTwo = new Label();
     labelTwo.addClassName("label-two");

     add(labelOne);
     add(labelTwo);
   }
}

And a css file "hello-grid.css":

.hello-grid {
    display: grid !important;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
}

.label-one {
    grid-column: 1;
}

.label-two {
    grid-column: 2;
}

How can I associate the ".hello-grid" css class with the HelloGrid Composite.
Is this the right/preferred way to use a css grid in Vaadin 12 at all

Meanwhile I found a possible solution by myself: add getElement().getClassList().add("hello-grid"); to the constructor of the Composite. But I initially expected to be able to set the elements classname by an annotation instead. I'll edit my question with this solution. — Frank Kaiser
– Frank Kaiser, Commented Jan 29, 2019 at 13:55

anasmi · Accepted Answer · 2019-04-10 12:31:34Z

It's a bit too late, but maybe answers someone else question.

It depends where exactly you have placed your css styles. I would suggest to place under webapp\frontend\styles, then you would be able to access them using @StyleSheet("frontend://styles/hello-grid.css"). As it also noted in official documentation, here Including Style Sheets it's

Relative to Servlet URL

Using your example with this set-up:

and styles like those (basically just adding colors to your stylesheet to verify, it works )

this was the output:

I haven't found any exact guides on Vaadin page, how you could use Grid styles, but this tutorial looks quite promising A Complete Guide to Grid. Otherwise, there shouldn't be anything special regarding Vaadin.

Also, it seems that there is an add-on in directory, which might help Css Grid Layout (Through, I haven't tried it out myself)

Collectives™ on Stack Overflow

How to use a css grid in Vaadin Flow as replacement for Framework 8's GridLayout?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related