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.
Hiding a component in a horizontal layout
Hello all, as someone relatively new to Vaadin I am looking for some suggestions as to the best way to do something.
I have a side bar (very simillar to the one in the AddressBook Tutorial) and it is in a horizontal layout called middleLayout. I also have a button that is supposed to hide/show the sidebar component when clicked. It toggles the sidebar into/out of view.
I was wondering what the best way to do this is? If i use the setVisible method on my sideBar the horizontal layout doesn't re-size and it's space is still there....this is obviously undesired. So it seems a bit messy to set the sideBar to not visible and then reset the expand ratio of the remaining element and then do the reverse when it is added back in.
The other route I took (and currently use) is to remove the sideBar from the horizontal layout component when it is hidden. This makes the layout re-size and look fine. The only issue with this is when I add the sideBar back into it's place, at position 0, it shows up in position 1 for half a second and then moves. The program also freezes up for this half-second.This obviously disrupts the nice user experience that Vaadin has created.
Any advice on this subject would be greatly appreciated. This is how i am currently doing it:
private void changeToolView() {
if (toolsShown == true) {
middleLayout.removeComponent(sideBar);
toolViewButton.setCaption("Show Tools");
toolsShown = false;
} else {
middleLayout.addComponent(sideBar, 0);
middleLayout.setExpandRatio(sideBar, 1);
toolViewButton.setCaption("Hide Tools");
toolsShown = true;
}
}
Peter Richardson: If i use the setVisible method on my sideBar the horizontal layout doesn't re-size and it's space is still there....this is obviously undesired.
That sounds like a bug, but I wasn't able to reproduce it quickly. Could you post a more complete code that reproduces this behavior?
Sure I will try to grab what you need.
I am guessing it is because of the expand ratio I set on the mainArea. I was under the assumption that if there was no other visible component in the layout an item that is told to expand will do so fully no matter what ratio it was given, it is only when there is more than one visible component in the layout that the ratios come into play. I guess though that it doesn't matter whether the component is visible or not it still holds the expand ratio place in the layout.
private void buildMainLayout() {
// Create main window
setMainWindow(new Window("JTX Web"));
// Make overall layout
VerticalLayout topLevelLayout = new VerticalLayout();
topLevelLayout.setSizeFull();
topLevelLayout.setMargin(false);
topLevelLayout.setSpacing(true);
// Add two two parts to layout
topLevelLayout.addComponent(createHeaderBar());
topLevelLayout.addComponent(createToolBar());
// Create main middle layout
middleLayout = new HorizontalLayout();
middleLayout.setSizeFull();
// Add parts to middle layout
sideBar = createSideBar();
mainArea = createMainPanel();
middleLayout.addComponent(sideBar);
middleLayout.addComponent(mainArea);
middleLayout.setExpandRatio(sideBar, 1);
middleLayout.setExpandRatio(mainArea, 4);
// Add middle layout to top layout
topLevelLayout.addComponent(middleLayout);
topLevelLayout.setExpandRatio(middleLayout, 1);
// Add main layout to main window
getMainWindow().setContent(topLevelLayout);
}
private Component createSideBar() {
// create sidebar layout
HorizontalLayout sideBarLayout = new HorizontalLayout();
sideBarLayout.setMargin(true);
sideBarLayout.setWidth(30, HorizontalLayout.UNITS_PERCENTAGE);
// create the Accordion.
Accordion publicJobFilterAccordion = new Accordion();
publicJobFilterAccordion.setSizeFull();
// create mock data labels
Label testLabel1 = new Label("Test Tree 2");
Label testLabel2 = new Label("Test Tree 3");
Label testLabel3 = new Label("Test Tree 4");
// add the components as tabs in the Accordion.
publicJobFilterAccordion.addTab(topTree, "Public Job Filters",
new ThemeResource("icons/JTX/JTXBuddy-Group.png"));
publicJobFilterAccordion.addTab(testLabel1, "User Job Filters",
new ThemeResource("icons/JTX/JTXBuddy.png"));
publicJobFilterAccordion.addTab(testLabel2, "Create Jobs",
new ThemeResource("icons/JTX/JTXDocument-Edit.png"));
publicJobFilterAccordion.addTab(testLabel3, "Search Jobs",
new ThemeResource("icons/JTX/JTXFind-Search.png"));
// add accordion to sidebar
sideBarLayout.addComponent(publicJobFilterAccordion);
sideBarLayout.setSizeFull();
return sideBarLayout;
}
private Component createMainPanel() {
// create main panel
mainPanelLayout = new VerticalLayout();
mainPanelLayout.setMargin(true);
mainPanelLayout.setSizeFull();
mainPanelLayout.setSpacing(true);
// create components
tabView = new JobListTabView(this);
displayPanel = new JTXDisplayPanel(this);
// create tab view layout
VerticalLayout mainTabViewLayout = new VerticalLayout();
mainTabViewLayout.addComponent(tabView);
mainTabViewLayout.setSizeFull();
tabView.setSizeFull();
// create job form layout
HorizontalLayout mainJobFormLayout = new HorizontalLayout();
mainJobFormLayout.addComponent(displayPanel);
mainJobFormLayout.setStyleName("formLayout");
mainJobFormLayout.setSizeFull();
// add sublayouts to main layout
mainPanelLayout.addComponent(mainTabViewLayout);
mainPanelLayout.addComponent(mainJobFormLayout);
mainPanelLayout.setExpandRatio(mainTabViewLayout, 2);
mainPanelLayout.setExpandRatio(mainJobFormLayout, 3);
return mainPanelLayout;
}
Then this is the method i tried using the setVisible methods
private void changeToolView() {
if (toolsShown == true) {
/*middleLayout.removeComponent(sideBar);*/
sideBar.setVisible(false);
toolViewButton.setCaption("Show Tools");
toolsShown = false;
} else {
/*middleLayout.addComponent(sideBar, 0);
middleLayout.setExpandRatio(sideBar, 1);*/
sideBar.setVisible(true);
toolViewButton.setCaption("Hide Tools");
toolsShown = true;
}
}