Responsive layout for different breakpoint

Hi Thanks for this great library. I am trying to implement a layout that will stack controls on different resolutions differently. For mobile, it is plain and straightforward and all controls are stacked. But for desktop/tablet view the columns are arranged differently on each row. Is there any way we can achieve it?

mobile-view

tab-view

Hi @pankaj-z,

This can be implemented relatively easily using breakpoints. The idea is to render the forms as depicted but to collapse them to a vertical list once a certain breakpoint is hit.

The @jsonforms/vue2-vuetify renderers have this already built in. They will render the usual UI Schema, which here could be a VerticalLayout with nested HorizontalLayouts to accomplish the bottom UI. Once the screen estate becomes smaller and a breakpoint is hit, they will collapse.

You can try it yourself here: https://jsonforms-vuetify-renderers.netlify.app/

CollapsingLayouts

For the other renderer sets you have to implement this behavior yourself. However it’s relatively simply as all you need is a custom HorizontalRenderer which is able to do this.