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.
Layout/Sizing In Split Pane
Hi,
I'm trying to get a standard SplitPane layout going : links, grouped together in functional areas on the left, and "content" on the right. In this example, I'm going to use Panel to group together some Buttons.
I want the panel to have 100% of the width of the left-hand-side of the split bar - but crucially, I want to have a margin around each panel so that it's not hard against the edge. If I leave it with no margin, that's fine (see attachment no-margin), but if I add a (silly 50px, for examples sake) margin to the panels, we don't get the "expected" behaviour (see with-margin attachment). I wanted to get the edge of the panel 50px from both left AND right hand sides of the left-hand container.
I suspect it's something to do with the dynamic size calculation; in our real application, we're actually using a CustomComponent instead of Panel, but I can reproduce the same behaviour with Panel. How should I go about fixing/tackling this?
Cheers,
Charles
public class WidthIssueApp extends Application{
@Override
public void init() {
setTheme("issue");
VerticalLayout mainLayout = new VerticalLayout();
mainLayout.setSizeFull();
SplitPanel splitPane = new SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL);
splitPane.setSizeFull();
VerticalLayout container = new VerticalLayout();
container.setStyleName("panel-container");
for (int i = 0; i < 2; i++) {
Panel panel = new Panel("Panel " + i);
panel.setWidth("100%");
for (int j = 0; j < 5; j++) {
Button b = new Button("Button " + j);
b.setWidth("100%");
panel.addComponent(b);
}
container.addComponent(panel);
}
Label dummyContent = new Label("Dummy Content");
splitPane.setFirstComponent(container);
splitPane.setSecondComponent(dummyContent);
Window window = new Window();
window.setContent(splitPane);
setMainWindow(window);
}
}
issues/styles.css :
.panel-container .v-panel {
margin : 50px;
}
The issue is quite clear: the core layouts do not take component margins (specified in CSS) into account when they calculate the required space for them.
One option is to just call container.setMargin(true), and specify the exact amount of margin with CSS.
Other option is to use my DashLayout component, which takes component specific CSS margins into account.
HTH,
Jouni
Thanks - I'd actually worked that out about half an hour after posting, and had switched to DashLayout !
Cheers,
Charles.