Environment:
- Vaadin 7.6.2
- no custom CSS rules so far besides for the headline
- Default theme in place: 'valo'.
In a nutshell
I have trouble with spacing while showing vertical scroll bars. Let me show some pictures to demonstrate the problem:
Correct on the left, incorrect on the right.
Description
When no scroll bars are shown, the spacing (padding) is shown correctly on the left as well as on the right side horizontally (refer to the red boxes). But as soon as the scroll bar gets visible, the spacing on the right between the Combobox and the scrollbar seems to be gone (refer to the red strokes on the left in each picture as measurement line).
However, if I add a margin (right) on the GridLayout containing the Combobox, the margin stays and behaves as expected when the scroll bars appears.
Details
The setup of the single components involved is as follows:
--- Panel rightSection -------------------------
| |
| --- VerticalLayout componentContainer ------ |
| | | |
| | --- CustomComponent componentWrapper --- | |
| | | | | |
| | | --- GridLayout grid ---------------- | | |
| | | | | | | |
| | | | --- Label headline ------------- | | | |
| | | | | | | | | |
| | | | -------------------------------- | | | |
| | | | | | | |
| | | | --- ComboBox combobox ---------- | | | |
| | | | | | | | | |
| | | | -------------------------------- | | | |
| | | | | | | |
The crucial settings are as following:
rightSection.setSizeFull(); // Panel
componentContainer.setSizeFull(); // VerticalLayout
// the CustomComponent for being able to show the vertical scrollbars
// as there is another component at the bottom of the
// componentContainer which has to be
// excluded of the vertical scrollbars
// therefore, in the constructor
CustomComponent(Component content) {
addStyleName("v-scrollable");
setCompositionRoot(content);
setHeight(100, Unit.PERCENTAGE);
setWidth(100, Unit.PERCENTAGE);
content.setSizeUndefined();
content.setWidth(100, Unit.PERCENTAGE);
}
// make the customComponent take full space inside its parent
componentContainer.setExpandRatio(componentWrapper, 1);
headline.setWidth(100, Unit.PERCENTAGE);
combobox.setWidth(100, Unit.PERCENTAGE);
Finally
How to preserve the space between the components inside the GridLayout and the vertical scrollbars (if present)?
As any time, any hint is appreciated :)
Cheers, bully
