Position of components changes after clicking button

There is my subwindow:

Code of this:


public class TransportDetailsView extends CustomComponent {

    public Window subwindow;
    
    public TextField title;
    
    public TextField quantity;
    
    public TextField price;
    
    public PopupDateField date;
	
    public Button saveButton;
	
    public NativeButton selectAllButton;
	
    public GridLayout mainLayout;
	
    public TwinColSelect twinColSelect;
	
    public OptionGroup paxSelect;
	
    private ProjectBussinessObject projectObject;	
	
    public TransportDetailsView(ProjectBussinessObject projectObject) {
    	this.projectObject = projectObject;
    	mainLayout = new GridLayout(5, 7);
    	mainLayout.setSizeUndefined();
    	setCompositionRoot(mainLayout);
    	setTransportLayout(mainLayout);
    }
    
    public void setTransportLayout(GridLayout layout) {
    	layout.setMargin(true);
        layout.setSpacing(true);
        
        saveButton = new Button("Save");
        
        selectAllButton = new NativeButton("Select all");
        selectAllButton.addListener(Button.ClickEvent.class, this,"selectAllButtonClick");
        
        title = new TextField();
        title.setCaption("Title:");
        title.setImmediate(true);
        title.setHeight("-1px");
        title.setWidth("150px");
        title.setNullRepresentation("");

        quantity = new TextField();
        quantity.setCaption("Quantity:");
        quantity.setImmediate(true);
        quantity.setHeight("-1px");
        quantity.setWidth("150px");
        quantity.setNullRepresentation("");
 	 	
        date = new PopupDateField();
        date.setCaption("Date:");
        date.setImmediate(true);
        date.setResolution(PopupDateField.RESOLUTION_DAY);
        date.setDateFormat("yyyy-MM-dd");
        date.setWidth("150px");
 		
        price = new TextField();
        price.setCaption("Price:");
        price.setImmediate(true);
        price.setHeight("-1px");
        price.setWidth("150px");
        price.setNullRepresentation("");
 		
        twinColSelect = new TwinColSelect();
        twinColSelect.setLeftColumnCaption("Available:");
        twinColSelect.setRightColumnCaption("Selected:");
        twinColSelect.setImmediate(true);	
		
        paxSelect = new OptionGroup("Select PAX:");
        paxSelect.addStyleName("horizontal");
        paxSelect.setMultiSelect(true);
        		
        paxSelect.addItem(projectObject.PAX1);
        paxSelect.addItem(projectObject.PAX2);
        paxSelect.addItem(projectObject.PAX3);
        paxSelect.addItem(projectObject.PAX4);
        paxSelect.addItem(projectObject.PAX5);
        paxSelect.addItem(projectObject.PAX6);
        paxSelect.addItem(projectObject.PAX7);
        paxSelect.addItem(projectObject.PAX8);
        paxSelect.addItem(projectObject.PAX9);
        paxSelect.addItem(projectObject.PAX10);
			
        formGeneralInfoLayout(layout);		
    }
    
    public void selectAllButtonClick (Button.ClickEvent event) {
    	for (Object id: paxSelect.getVisibleItemIds()) {
    		paxSelect.select(id);
    	}
    }
    
    public GridLayout formGeneralInfoLayout(GridLayout layout) {
    	layout.addComponent(saveButton, 0, 0);
     	
    	layout.addComponent(title, 0, 1);
    	layout.addComponent(quantity, 1, 1);
    	layout.setComponentAlignment(title, Alignment.TOP_LEFT);
    	layout.setComponentAlignment(quantity, Alignment.TOP_LEFT);
    	
    	layout.addComponent(date, 0, 2);
    	layout.setComponentAlignment(date, Alignment.TOP_LEFT);
    	layout.addComponent(price, 1, 2);
    	layout.setComponentAlignment(price, Alignment.TOP_LEFT);
    	
    	if (paxSelect.size() > 0) {
    		layout.addComponent(selectAllButton, 0, 3);
    		layout.addComponent(paxSelect, 0, 4, 1, 5);
    		layout.setComponentAlignment(paxSelect, Alignment.TOP_LEFT);
    	
    		layout.addComponent(twinColSelect, 2, 1, 2, 4);
    		layout.setComponentAlignment(twinColSelect, Alignment.TOP_LEFT);
    	} else {
    		layout.addComponent(twinColSelect, 2, 1, 2, 2);
    		layout.setComponentAlignment(twinColSelect, Alignment.TOP_LEFT);
    	}
    	return layout;
    }
}

This subwindow is filled with the data in other class, but I don’t post it, because it doesn’t make any sense. The subwindow looks nice as I want it to be. But then I click native button “selectAllButton” and clicking calls listener “selectAllButtonClick” the view of the subwindow changes. selectAllButton selects all the checkboxes in OptionGroup.

Why does the view change? How to solve it that position of the components will stay the same? If I select checkboxes by hand the view doesn’t change. It just changes after calling listener.

Hi, could you try the app in debug mode (use ?debug query parameter in the URL), manually select all the checkboxes and then click the “FL” (“Force Layouts”) button in the debug window? Does the same problem occur then? You might also like to click the “AL” (“Analyze Layouts”) button to see if it reports any problems with your layouts.

I solved this by setting width: paxSelect.setWidth(“300px”);
Now it works fine.