A Hello World Valo Responsive App

Hi I am trying out Valo/Responsive functionality. I get the impression responsive is supported out of the box with valo without needing to change the scss, so I tried a basic UI using Valo theme, adding Responsive.makeResponsive(this) in UI.init() and adding a few components to a vertical layout, then tested viewing it in a Kindle Fire 7", but everything is still very small, are there any steps missing? Or can someone post the code for simple UI that’s configured correctly for responsive layout? Thanks

Hey kingcode,

You still need to specify what should happen when a certain condition is met. I recommend you take a look at: https://vaadin.com/book/-/page/themes.responsive.html.

Yeah, Joacim said it. Making a UI responsive only enables the size-conditional CSS rules.

However, Valo does support responsive layouting in the special valo-menu styles, which are intended for making application menus. The valo-menu is not documented very well currently; there’s only some examples, as mentioned in
this thread
. There’s also
this stackoverflow article
about it.

Thanks for the responses, Yep thought you turn on the flag and everything just automagically happens, wishful thinking on my part :-). but looks like there’s some legwork to be done with the scss. Thanks for the links to the resources!