Skip to main content
After you complete the basic form designer settings, you can configure the overall page layout separately.

​
1. Form Layout Overview

​
1.1 Component Layout

In YiDA, components are arranged in a single column by default. The Layout container, Group, and Subform (spreadsheet mode) components take up 100% of the width by default. All other components take up 50%, occupying half of the page width. To make a form use the full 100% width, use the Layout container.
Component

​
1.2 Number of Columns

To use a two-column layout, click Columns in the form settings attribute panel. After you enable the two-column layout, a specific component may still need to occupy the full width. To do this, click the two-column option in the advanced settings of that component.
Form settings — PC settings

​
1.3 Layout Container

The layout container component lets you arrange your page more flexibly. In addition to the full 100% width mentioned above, it also supports any number of columns. For layout container configuration, see: Layout container
Configure layout

​
1.4 Use Groups

The group component lets you organize your form into groups and add group forms. It also lets you style your component layout, making the page more visually appealing. Refer to the following image for configuration:
Page settings

​
1.5 Access Modes

Preview access:
Click Preview on the form interface to access the app and view the overall configuration page of the current form. You cannot submit data or modify form settings, and no sidebar navigation is displayed. The page has a fixed width limit of 1,180 pixels.
Save access: After you click Save, the form enters the app center page. Click Access at the top of the current app to view the form with the sidebar navigation displayed. You can click the navigation bar to view other form pages and submit data, but you cannot edit the form.

​
1.6 Multi-Device Display

For the five layout methods mentioned above, mobile display differs from PC display. On mobile, all forms use a single-column layout by default.
On tablets, the layout also adapts automatically.
Note: If you have specific requirements for mobile, click Mobile settings at the top of the form to configure a multi-column layout, as shown below: