title: Vaadin: spacing with vertical scrollbar
body: <p><strong>Environment:</strong></p>
  
  <ul>
  <li>Vaadin 7.6.2</li>
  <li>no custom CSS rules so far besides for the headline</li>
  <li>Default theme in place: 'valo'.</li>
  </ul>
  
  <p><strong>In a nutshell</strong></p>
  
  <p>I have trouble with spacing while showing vertical scroll bars.
  Let me show some pictures to demonstrate the problem:</p>
  
  <p><a href="https://i.stack.imgur.com/ysIVZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ysIVZ.png" alt="enter image description here"></a><a href="https://i.stack.imgur.com/sO7y9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sO7y9.png" alt="enter image description here"></a></p>
  
  <p>Correct on the left, incorrect on the right.</p>
  
  <p><strong>Description</strong></p>
  
  <p>When no scroll bars are shown, the spacing (padding) is shown correctly on the left as well as on the right side horizontally (<em>refer to the red boxes</em>).
  But as soon as the scroll bar gets visible, the spacing on the right between the Combobox and the scrollbar seems to be gone (<em>refer to the red strokes on the left in each picture as measurement line</em>).</p>
  
  <p>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.</p>
  
  <p><strong>Details</strong></p>
  
  <p>The setup of the single components involved is as follows:</p>
  
  <pre><code> --- Panel rightSection -------------------------
  |                                                |
  |  --- VerticalLayout componentContainer ------  |
  | |                                            | |
  | |  --- CustomComponent componentWrapper ---  | |
  | | |                                        | | |
  | | |  --- GridLayout grid ----------------  | | |
  | | | |                                    | | | |
  | | | |  --- Label headline -------------  | | | |
  | | | | |                                | | | | |
  | | | |  --------------------------------  | | | |
  | | | |                                    | | | |
  | | | |  --- ComboBox combobox ----------  | | | |
  | | | | |                                | | | | |
  | | | |  --------------------------------  | | | |
  | | | |                                    | | | |
  </code></pre>
  
  <p>The crucial settings are as following:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p><strong>Finally</strong></p>
  
  <p>How to preserve the space between the components inside the GridLayout and the vertical scrollbars (if present)?</p>
  
  <p>As any time, any hint is appreciated :)</p>
  
  <p>Cheers,
  bully</p>