Labels fail to claim space in GridLayout

Vaadin 6 / 7 / 8 Framework UI
1

I have discovered problems when using Labels in a GridLayout with an expanding column (calling ‘setColumnExpandRatio’). It seems that Labels don’t claim their due space.

Below is a simplified example with a single source code file. You see two identical GridLayouts, each with a caption, one above the other. The only difference is one uses
Buttons
 instead of
Labels
 in the first two cells, “MajorTitle” and “MinorTitle”.

Notice that in the 2nd grid, the “MajorTitle” Label has disappeared.

I added some lines to show the GridLayout.

Here is the source code. Not as long as it may look. Each GridLayout is only a dozen lines of code, repeated for 2 GridLayout instances.

package com.example.dummy;

import com.vaadin.Application;
import com.vaadin.ui.*;
import com.vaadin.ui.Button.ClickEvent;

public class DummyApplication extends Application {

    @SuppressWarnings ( { "serial", "unused" })
    @Override
    public void init() {

        // BUTTONS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
        // Good: The "major" and "minor" buttons appear on screen, successfully claiming their own space.
        GridLayout buttonsSucceedLayout = new GridLayout();
        buttonsSucceedLayout.setCaption( "Good: The 'major' and 'minor' buttons appear on screen correctly." );
        buttonsSucceedLayout.setColumns( 4 );
        buttonsSucceedLayout.setRows( 2 );
        buttonsSucceedLayout.setColumnExpandRatio( 1, 1.0f ); // This line is trigger of the problem.

        buttonsSucceedLayout.addComponent( new [color=#e40a0a]
Button
[/color]( "MajorTitle" ), 0, 0 ); // "Button" works here.
        buttonsSucceedLayout.addComponent( new [color=#e40a0a]
Button
[/color]( "MinorTitle" ), 1, 0 ); // …and here.
        buttonsSucceedLayout.addComponent( new Button( "<" ), 2, 0 );
        buttonsSucceedLayout.addComponent( new Button( ">" ), 3, 0 );

        // Create content for bottom half of our GridLayout.
        Button fillerButton = new Button( "Really really long long long label for this handsome button" );
        buttonsSucceedLayout.addComponent( fillerButton, 0, 1, 3, 1 );
        
        // LABELS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
        // Bad: The 'major' label disappears. 
        // More Bad: Shorten the fillerButton2's caption, and see both labels appear incorrectly (cropped).
        // Labels seem to fail to claim their own space in a GridLayout.
        GridLayout labelsFailLayout = new GridLayout();
        labelsFailLayout.setCaption("Bad: The 'major' label disappears.");
        labelsFailLayout.setColumns( 4 );
        labelsFailLayout.setRows( 2 );
        labelsFailLayout.setColumnExpandRatio( 1, 1.0f ); // This line is trigger of the problem.

        labelsFailLayout.addComponent( new [color=#e40a0a]
Label
[/color]( "MajorTitle" ), 0, 0 ); // "Button" works here.
        labelsFailLayout.addComponent( new [color=#e40a0a]
Label
[/color]( "MinorTitle" ), 1, 0 ); // …and here.
        labelsFailLayout.addComponent( new Button( "<" ), 2, 0 );
        labelsFailLayout.addComponent( new Button( ">" ), 3, 0 );

        // Create content for bottom half of our GridLayout.
        Button fillerButton2 = new Button( "Really really long long long label for this handsome button" );
        labelsFailLayout.addComponent( fillerButton2, 0, 1, 3, 1 );

        // Display on screen. - - - - - - - -
        Window window = new Window( "Problem of Labels Not Claiming Space in GridLayout" );
        window.addComponent( buttonsSucceedLayout );
        window.addComponent( labelsFailLayout );
        setMainWindow( window );

    }

}
2

Labels have by default width=100%

Try with something like :

minorTitle.setSizeUndefinde();
majorTitle.setSizeUndefined();
3

Thanks to Mathias Clerc for the answer: “.setSizeUndefined()”

Here’s may same example code above, now fixed.

package com.example.dummy;

import com.vaadin.Application;
import com.vaadin.ui.*;
import com.vaadin.ui.Button.ClickEvent;

public class DummyApplication extends Application {

    @SuppressWarnings ( { "serial", "unused" })
    @Override
    public void init() {

        // BUTTONS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
        // Good: The "major" and "minor" buttons appear on screen, successfully claiming their own space.
        GridLayout buttonsSucceedLayout = new GridLayout();
        buttonsSucceedLayout.setCaption( "Good: The 'major' and 'minor' buttons appear on screen correctly." );
        buttonsSucceedLayout.setColumns( 4 );
        buttonsSucceedLayout.setRows( 2 );
        buttonsSucceedLayout.setColumnExpandRatio( 1, 1.0f ); // This line is trigger of the problem.

        buttonsSucceedLayout.addComponent( new Button( "MajorTitle" ), 0, 0 ); // "Button" works here.
        buttonsSucceedLayout.addComponent( new Button( "MinorTitle" ), 1, 0 ); // …and here.
        buttonsSucceedLayout.addComponent( new Button( "<" ), 2, 0 );
        buttonsSucceedLayout.addComponent( new Button( ">" ), 3, 0 );

        // Create content for bottom half of our GridLayout.
        Button fillerButton = new Button( "Really really long long long label for this handsome button" );
        buttonsSucceedLayout.addComponent( fillerButton, 0, 1, 3, 1 );
        
        // LABELS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
        // Bad: The 'major' label disappears. 
        // More Bad: Shorten the fillerButton2's caption, and see both labels appear incorrectly (cropped).
        // Labels seem to fail to claim their own space in a GridLayout.
        GridLayout labelsFailLayout = new GridLayout();
        labelsFailLayout.setCaption("Bad: The 'major' label disappears.");
        labelsFailLayout.setColumns( 4 );
        labelsFailLayout.setRows( 2 );
        labelsFailLayout.setColumnExpandRatio( 1, 1.0f ); // This line is trigger of the problem.

        Label majorTitle = new Label("MajorTitle");
        [color=#d40404]
majorTitle.setSizeUndefined(); 
[/color]// Solution: Must set Label's size to undefined for them to claim their space in a GridLayout.
        Label minorTitle = new Label("MinorTitle");
        [color=#d40404]
minorTitle.setSizeUndefined();
[/color]
        labelsFailLayout.addComponent( majorTitle, 0, 0 ); // "Button" works here.
        labelsFailLayout.addComponent( minorTitle, 1, 0 ); // …and here.
        labelsFailLayout.addComponent( new Button( "<" ), 2, 0 );
        labelsFailLayout.addComponent( new Button( ">" ), 3, 0 );

        // Create content for bottom half of our GridLayout.
        Button fillerButton2 = new Button( "btn" );
        labelsFailLayout.addComponent( fillerButton2, 0, 1, 3, 1 );

        // Display on screen. - - - - - - - -
        Window window = new Window( "Problem of Labels Not Claiming Space in GridLayout" );
        window.addComponent( buttonsSucceedLayout );
        window.addComponent( labelsFailLayout );
        setMainWindow( window );

    }

}