Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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
I found this bug https://dev.vaadin.com/ticket/8971 (3y old). I suggest commenting on this bug with your test case.