Groups

Groups include multiple single elements. Groups are defined as items wth contenttype="grouplayout" and have specific options. Grouped items appear side by side in the app.

DefinitionDescriptionValuesExamples
columnspacing=;Defines a spacing between the items contained in this group.pxcolumnspacing=5;
buttonheight=;Sets the height of the group (in "pixel" or as a percentage of the display).

Please note that the group will be shown in the app at least as high as the highest element within the group. It is therefore important to adjust the height of the individual elements.
px or as % of the displayheight=30%;
height=200;
separatorcolor=;Draws a simple colored line below the element.

Lines for groups are full width.
hex code
default: transparent
separatorcolor=transparent;
padding=;Sets uniform padding.pxpadding=10;
Padding for all four sides is 10 pixels.
padding=,;Sets horizontal and vertical padding.Comma separated px values
Order: horizontal, vertical.
padding=10,30;
Padding for the top and bottom is 10 pixels, the left and right is 30 pixels.
padding=,,,;Sets padding for left, top, right, bottom.Comma separated px values
Order: Left, top, right, bottom.
padding=10,20,30,40;

📘

Element width

You can use the definition "elementwidth=;" for items contained in a group.

default: 1* => auto, just fills up the space
pixel / percent support same way as height

  • => pixels
  • % => percent
  • the last element or those without specified width fill up the remaining space.

Again: This is just supported when item is within a group.