Child pages
  • Editing a responsive layout form
Skip to end of metadata
Go to start of metadata

Servoy 8 supports "responsive layout" forms. A form that is in responsive layout will re-layout its components based on the width of the browser. Behind the scenes, Bootstrap 12 grid is used to do the layout.

Responsive forms can only be edited with the HTML form editor which is enabled by default in Servoy 8.

When dragging an element from the palette, the editor automatically highlights the existing layout structure. In order to see where the component will be dropped, the cursor holding the element (component or layout) has to stop moving for at least 200 ms. After that, the editor will re-layout the form with the new component in that position. If the mouse button is released, the component will actually be dropped in the form. If, instead,  the cursor will be moved, the editor will re-layout the form again, but this time without the new component.

After the component is dropped, the editor will remove the highlighting of the layout structure and will render the form as it would look like in a "real" client.

The "preview" setting, if switched on, will keep the layout highlights all the time. 

 

Layouts can be nested according to the following rules:

"container" can contain "row"

"row" can contain "column"

"column" can contain "component", "row", "div", "3fields", "labelfield", "responsivetable", "collapsible", "2screens"

"div" can contain  "component", "div"

The editor will change the cursor image to let the user know if a component or layout can or can not be dropped onto a layout container.

The screen cast below shows how to build a flow layout form using a predefined form layout structure.

https://drive.google.com/file/d/0B_hEnj_ZSycvMEw2VmktYzI3Qm8/view

Note: main forms should have a "container" as the root of the containment hierarchy, while forms designed to be shown in tabpannels should not have "container"s.

  • No labels