Positioning and calculation of the size of controls

The TwinCAT HMI offers various options for the positioning and calculation of the size of controls. In general, each control is always defined by its position inside its container. In the standard settings these are the values for Left and Top combined with Width and Height. These four values are specified in the unit pixel (px). If percent (%) is specified as the unit for these values, then the size of the parent control is used as a reference. A control with 50% width is thus half as wide as its parent control.

The influence of the different attributes on the size of the control is defined with the aid of the attributes WidthMode or HeightMode. All controls have the Value and Parent modes. Many controls additionally offer the Content mode. The attributes necessary for the modes are listed in the following tables. The various separators have the following meanings:

Value (Standard)

Width, Height

Left, Right

Top, Bottom



Left & Right

Top & Bottom



Left | Right

Top | Bottom


The Value mode is configured as the default together with the aforementioned attributes Left, Top, Width and Height. However, an arbitrary combination of any two of the three possible attributes in the horizontal and vertical direction is possible in order to define the position and size of a control:


If values are configured for all three variables per direction, the last one in this list (i.e. Right or Bottom respectively) is discarded. If only one variable is configured per direction for a control, it cannot be displayed!


The attributes Width and Height are ignored in the Parent mode. The size of the control depends on the size of the parent control. In addition, the distances to the edges of the parent control must be defined by the attribute pairs Left, Right and Top, Bottom. After changing the mode from Value to Parent, therefore, all four attributes must be configured so that the control is displayed.


Most container controls additionally have the Content mode. The attributes Width and Height are ignored here too. The size of the control depends on the size of the child control. In this mode, therefore, the control is just large enough so that every child control is fully visible. Here are some examples of this mode:

Minimum / Maximum Width / Height

In addition, a minimum and maximum size can be defined for each control in the horizontal and vertical directions. The attributes Minimum Width (including Minimum Width Unit), Maximum Width (including Maximum Width Unit) or Minimum Height (including Minimum Height Unit) and Maximum Height (including Maximum Height Unit) respectively are responsible for this.

Priority: calculated size > calculated maximum value > calculated minimum value

A set maximum value thus overwrites the calculated size, but a set minimum value overwrites the maximum value.

For example, this allows the height of the View to be adapted to the contents (WidthMode=Content), but at the same time the minimum height can be set to 100% so that, for example, no area is created without a background image.


If two controls (partly) occupy the same area on the screen, then the order will be observed. This order can be changed by drag & drop within the Document Outline or directly in the HTML source code.

The Z-Index attribute offers additional options. This can assume negative numeric values and has the default value 0. A control with a higher numerical value in this attribute will be drawn "further forward", i.e. in case of doubt it conceals a control with a lower numerical value. It must be noted that the Z-index also has no global meaning, but is valid only inside a container.


A container control groups together any child controls. The container must be large enough to accept all child controls, because any overfilling will be cut off.