Would like to have a personal training

Hi guys. Looking for a personal training via Teams, regarding responsivness. Should be around 1 -3 hours

What would i like to get?

  • A Training about how to get a vaadin app responsive.
  • Maybe some kind of sheet with the most best practices
  • Would bring in some examples, which we can make responsive during the training
  • Which component should i use? FlexLayout? How to flex a horizontal etc

There are tons of CSS tutorials out there but i dont have that time to learn everything and i dont know which one is actual or outdated etc. Would like to focus on work instead of loosing time with those details around responsiveness. I only want to get known how i can handle some divs breaking on different screens etc.

When i make something responsivle i tinker around until it works, its work most time but not very effective.

Looking forward to some offers :slight_smile:

I apologize in advance, this message is not such offer.

However, when I saw your post I am wondering if this is a symptom that Flow is lacking a clear and uniform API to make its components responsive?

  • FormLayout has ResponsiveStep
  • Charts has Condition and Rules object
  • Grid responsive api is being designed (API suggestion request (for a new Vaadin Grid feature))
  • Other components it’s DYI css hackery (which is what most Vaadin developers try to stay away from right?)

I would like to have horizontal layout for example which breaks on smaller screens. automatically. currently i do it like this, but this is a solution from chat GPT but i want to know what i am do.

addClassNames(LumoUtility.Display.FLEX, LumoUtility.FlexDirection.COLUMN, LumoUtility.FlexDirection.Breakpoint.Large.ROW, LumoUtility.Gap.MEDIUM);

dont know if thats correct, but it works. When i used JSF it was responsive our of the box.

FormLayout i am using very often to archive responsiveness, even if it is thougt to use with forms, i put other components in there as well.

I think there are many ways to get it resonsive, as well as the theming, this changed a lot during the last versions and not its confusing what is “state of the art” to get the app responsive and style it though themeing

1 Like

Hey, Product Manager at Vaadin here. It just so happens that we’re working on several responsive features at the moment.

The big challenge with providing “responsive” is that it’s an umbrella term that covers many different techniques, so we need to choose which of those many cases to provide helpers for. And to make things worse, many of those techniques are so heavily case-specific (e.g. dependent on the exact UI structure you have) that it’s difficult if not impossible to provide a generic feature for it (that’s easier to use than doing the same with css).

All Vaadin components except for the layouts are already responsive out of the box, because in those specific cases we can be very opinionated about how they should behave. No css hackery needed. With generic layouts, it’s much more difficult because there are so many options depending on how you want your UI to behave.

If I recall correctly (which I might not, as it’s been a while), to make responsive layouts in JSF you apply various utility classes to elements, which is the same as you’d do with the LumoUtility API. Utility classes are nice in that they hide a bunch of css behind a classname, but they’re a fairly low-level or crude abstraction over css.

As for this specific thing you gave as an example, you can already (since 24.6) make a HorizontalLayout wrap to multiple lines with .setWrap(true) (docs here).

The UtilityClass-based approach chatGPT gave you is also technically correct, although it looks like it’s taken from an example where it’s applied on a Div rather than a HorizontalLayout. The parts with Display.FLEX and Gap.MEDIUM are unnecessary for the solution.

Here are a couple of recent blog posts about building responsive layouts:

1 Like