Sections layout

Qalcwise is built with the option to run on most of today's devices with a web browser. Therefore, each application created by a designer is responsive by default - automatically adapts to the screen size of your web browser. Knowledge about the behavior of the appearance of the application with different screen resolutions will allow you to create application interface that looks great on mobile devices and desktop computers.

The basic behavior of the position of sections at different resolutions is wrapping the section below the line in which it is located if the width of the row no longer fits in the width of the browser window. In this way, the sections are always visible, even when the line does not fit in the user's browser.

 

Example:

 

  1. Three sections are located in a row.image28.png
  2. Two sections are located in a row. The last section has collapsed below the line in which it was located.
    image12.png
  3. Only one section is in a row. The sections are folded to the left side to form a single column.image25.png

This behavior can be modified by the user using the mechanism of auto width.

Note, auto width cannot be determined for spreadsheets and data tables.

Setting auto width allows you to set a fixed size of a section in relation to the application screen. Depending on the setting, the section is from 1 to 6 parts separated area of the screen. If sections contained in one line together occupy more than 6 fields, the last section will be wrapped to the next line.

Examples:

  1. Both sections occupy an area no larger than the size of the screen.

 image27.png occupies 4/6, image21.png occupies  2/6

 image15.png

 image27.png occupies 2/6, image21.png occupies  4/6

 image23.png

  1. The second section is not occupied because the sum of fields is 5 + 3 = 8 > 6. It will be folded under the first section situated to the left.

  image27.png occupies 5/6, image21.png occupies 3/6

 image02.png

To set the width of the auto section, select it in the workspace designer and go to options:

image14.png

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk