GridLayout layout incorrect for CheckBoxGroup / RadioButtonGroup

I have issues with the GridLayout where the layout of the grid is messed up when I use for example a CheckBoxGroup component. The DOM shows that the layout-slot for the CheckBoxGroup gets a “height: 0px”, probably because the component has relative height and the layout is not capable of calculating the required height?

Is there something I can do to use a CheckBoxGroup or RadioButtonGroup with an arbitrary number of items in a GridLayout without hard-coding the height?

This is an example to reproduce the issue, the label “second component” gets drawn over the checkboxes. In some cases the layout is temporarily fixed after the server round-trip when one of the checkboxes is checked.

  GridLayout loLayout = new GridLayout();
  loLayout.setColumns( 1 );

  CheckBoxGroup<String> loCB = new CheckBoxGroup<>( "checkboxes" );
  loCB.setItems( "item 1", "item 2", "item 3", "item 4" );

  loLayout.addComponent( loCB );
  loLayout.addComponent( new Label( "second component" ) );


I got the same problem. Any solutions?

Probably issue

Currently no solutions as far as I know, but haven’t tried reproducing this yet with the releases that appeared in the last couple of months.

Issue #9148 as noted by Henri seems to describe the issue indeed!