Modal window with TabSheet does not repositioning itself on viewport resize

Hi there,

I encountered an issue lately when I create a modal window with a tabsheet inside.

I don’t know what am I doing wrong, but when I first click on another tab and then resize the viewport, the absolute position does not change as it supposed to. However, It works properly at the first load of the modal window before changing tab.

Here is the code I recreated to explain my case :

TestModal.java

public class TestModal extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);

        Button button = new Button("Click Me");
        button.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
               Modal modal = new Modal(0);
               UI.getCurrent().addWindow(modal);
            }
        });

        layout.addComponent(button);
     }
}

Modal.java

public class Modal extends Window {
    
    private HorizontalLayout headerContainer;
    private VerticalLayout firstTabContent;
    private VerticalLayout secondTabContent;
    private TabSheet tabSheet;

    public Modal(int selectedTab) {

        this.setModal(true);
        this.setResizable(false);
        this.setStyleName("modal");

        VerticalLayout mainContent = new VerticalLayout();
        
        this.initHeader();
        this.initTabSheet();
        this.initFirstTabContent();
        this.initSecondTabContent();
        
        this.tabSheet.addTab(this.firstTabContent, "TAB 1");
        this.tabSheet.addTab(this.secondTabContent, "TAB 2");

        this.tabSheet.setSelectedTab(selectedTab);
        
        mainContent.addComponents(this.headerContainer, this.tabSheet);
        mainContent.setExpandRatio(this.tabSheet, 1f);
        
        this.setContent(mainContent);
    }
    
    private void initHeader() {
        this.headerContainer = new HorizontalLayout();
        headerContainer.setHeight("52px");
        headerContainer.setWidth("100%");

        Label lblTitre = new Label("Test Modal Window");
        headerContainer.addComponent(lblTitre);
        headerContainer.setComponentAlignment(lblTitre, Alignment.MIDDLE_LEFT);
    }
    
    private void initTabSheet() {
        this.tabSheet = new TabSheet();
        this.tabSheet.setSizeFull();
        this.tabSheet.addStyleName(ValoTheme.TABSHEET_PADDED_TABBAR);
        this.tabSheet.addStyleName(ValoTheme.TABSHEET_CENTERED_TABS);
        this.tabSheet.addStyleName(ValoTheme.TABSHEET_ONLY_SELECTED_TAB_IS_CLOSABLE);
    }
    
    private void initFirstTabContent() {
        this.firstTabContent = new VerticalLayout();
        this.firstTabContent.setWidth("100%");
        this.firstTabContent.setSpacing(true);
        this.firstTabContent.setMargin(true);
        
        Label lblFirstContent = new Label("Content tab 1.");
        this.firstTabContent.addComponent(lblFirstContent);
    }
   
    private void initSecondTabContent() {
        this.secondTabContent = new VerticalLayout();
        this.secondTabContent.setWidth("100%");
        this.secondTabContent.setSpacing(true);
        this.secondTabContent.setMargin(true);
        
        Label lblSecondContent = new Label("Content tab 2.");
        this.secondTabContent.addComponent(lblSecondContent);
    }
}

See the result on the attached screenshot.

Thank you for your help !

Lrt
21311.jpg

I found this bug
https://dev.vaadin.com/ticket/8971
(3y old). I suggest commenting on this bug with your test case.

Done.

Thank you Johannes !