Biggest challenge is creating Responsive layouts

I was just using HL and VL layout always. It works well in large screens. But when it comes to Mobile, it is not. I tried Grid ( display : grid ) but it is complex and confusing. What is your experience on this ?

In addition to CSS grid layouting, there’s also FlexLayout where you can enable wrapping:

        FlexLayout layout = new FlexLayout();
        layout.setFlexWrap(FlexLayout.FlexWrap.WRAP);

It’s not a solution for everything, but it will help in certain situations.

Some simple examples of how it works here: flex-wrap - CSS: Cascading Style Sheets | MDN

I usually end up with a custom Java class similar to this: Vaadin Add-on Directory
or this: https://jeanchristophe.app.fi/bootstrap-for-vaadin-demo/layout/grid/

It depends a bit of your usecase.
Sometimes it’s easier to manage something that is automatically responsive and it’s enough. (for this I’m using a grid like this https://codepen.io/travishorn/pen/RdPLwj)
Sometimes you want to manage it manually then you can use the md, xl, prefixes…
Sometimes you need custom css.

There are several opition:
FlexLayout: You can set flex-wrap to auto so that the elements are automatically wrapped if there is not enough space in one row.
One disadvantage is, that you don’t have columns so elements on different rows are not necessarily alligned.
FormLayout: Lets you define multiple so called responsive steps which set the available columns per row. It will automatically wrap, if there are more elements then columns.

For a lot of usecases those two, relatively simple, components are probably enough.

However, as we have quite complex forms, we created our own responsive layout based on CSS grid layout.
Similar to the FormLayout, it uses responsive steps (in our case fixed UI breakpoints) to define grid properties for different screen sizes.
It allows you to define grid-template-columns, grid-template-rows, grid-gap etc. for the container and grid-column, grid-rowetc. for the children.
The webcomponent then uses this configuration to create a @media (or @container) for every responsive step and inserts this into the shadowRoots style.
The children are targeted using nth-child, so no wrapper element is needed to apply the styles.
The (simplified) usage looks something like this:

ResponsiveGridLayout grid = new ResponsiveGridLayout();
grid.config()  // Default-Config
  .templateColumns("1fr 1fr");
grid.config(UIBreakpoint.LARGE_SCREEN)  // Config for large screens
  .templateColumns("repeat(4, 1fr)");
var element = grid.addElement(new Span("Grid element"));
element.config()  // Default-Config
  .column("auto span 2");
element.config(UIBreajpoint.LARGE_SCREEN)  // Config for large screens
  .column("auto span 4");

This approach is very flexible and as it is using css only it should also have a pretty good performance.

2 Likes

This is cool. Let me see if I can create one myself.