Responsive Form

Webix JS
#1

Is there a way to make a reponsive form?
I don’t want to hide the form sections, but resize it. I saw in your examples that all them have a width property defined. Is there a way to do this?

This is a example of a form that I want to resize in my appliccation:
http://webix.com/snippet/9522426a

Detail:

I’m using this form inside a bootstrap modal, not in the page.

Thanks for all,
Cheers,

#2

It is possible to set the relative size (gravity) and sizing limits (min/maxWidth and height) for all components. Please check the following article for details: http://docs.webix.com/desktop__dimensions.html

But also please note that in such case the parentdiv container should have the relative size to a page, otherwise it will be adjusted to the minimal size of the form. Also, if some form’s component has a strict size, the form will adjust to it (as happened in the snippet due to the width of the last combo).

#3

Thanks Listopad,
Problem solved! :slight_smile:

#4

What is the best way to set up a form so that when the size is “portrait” set the labelPosition of all “label-able” (derived from webix.ui.text) elements to “top”? But set labelPosition to “left” if the size is “landscape”.
I am hoping to get this behavior when the user rotates a mobile device and the orientation has changed.

Except for webix.ui.checkbox and webix.ui.radio (maybe others?) - those labels should remain on the right.

#5

@reycri there’s no built-in solution for such task, so it will require the manual definition oflabelPosition,labelWidth andheight properties in onRotate event.

Here’s an approximate solution (with the basic checkup): http://webix.com/snippet/m/6873927a

To see and edit the source code, removem/ from the link.