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.
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.
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
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
We use cookies to serve our customers and website visitors in the best possible way. Cookies are used for the proper functioning of the website and for improving the user experience, monitoring visitor traffic and marketing purposes. By continuing to browse the site, you agree to our use of cookies. You can read more about cookies here.
We use cookies to serve our customers and website visitors in the best possible way. Cookies are used for the proper functioning of the website and for improving the user experience, monitoring visitor traffic and marketing purposes. By continuing to browse the site, you agree to our use of cookies. You can read more about cookies here.