groupBox components layout issue

Support
#1

Hello,

I am having a layout issue for groupBox component resizing and overlapping.
I run my application on system with screen size (21.5-inch) & it looks fine with proper spacing but If I run the same application in a laptop with a screen size (13 inch), the groupBox components starts to overlap.

How can I make it resizable automatically based on the screen size.

Please find the attached pictures.

5-inch

on screen size 13-inch

#3

Hi!

groupBox provides the same amount of space to all children components. And when width of this space is less than width of children component it will overlay the children.

To avoid this, you should set each children width to 100%. So they will occupy all space that is allocated to them. Also, set the spacing property to true in the groupBox. It will add some gap between childrens.

You can try code example below:

<groupBox width="100%"
          orientation="horizontal"
          spacing="true">
    <textField caption="Text 1" width="100%"/>
    <textField caption="Text 2" width="100%"/>
    <textField caption="Text 3" width="100%"/>
    <dateField caption="Date field 1"
               dateFormat="MM-dd-yyyy"
               width="100%"/>
    <dateField caption="Date field 2"
               dateFormat="MM-dd-yyyy"
               width="100%"/>
    <checkBox caption="Active Check" width="100%"/>
    <textField caption="Text 4" width="100%"/>
    <textField caption="Text 5" width="100%"/>
    <textField caption="Text 6" width="100%"/>
</groupBox>
1 Like
#4

Hi,

It seems that you should use ScrollBoxLayout or somehow change the layout. Also, there are useful tips on layout rules in this presentation: High productivity application development platform