title: gwt ScrollPanel in TabPanel: no vertical scrollbar
body: <p><strong>EDIT</strong></p>
  
  <p>I have fixed the whitespace behaviour by resizing components within the <code>VerticalPanel</code>, that seem to have had an effect on the panel's dimension somehow missed by the console. I don't quite understand how.</p>
  
  <p>However, I am still stuck with none of my panels showing vertical scroll bars.</p>
  
  <p>In a GWT project, I have the following structure:</p>
  
  <p><strong>Page</strong></p>
  
  <pre><code>DockLayoutPanel
      North (header)
      Center (body)
      South (footer)
  /DockLayoutPanel
  </code></pre>
  
  <p><strong>Body</strong></p>
  
  <pre><code>SplitLayoutPanel$1
      West
          SplitLayoutPanel$2
               North
               Center
                   TabPanel
                       ScrollPanel
                           VerticalPanel
                               -Several widgets-
                           /VerticalPanel
                       /ScrollPanel
                   /TabPanel
               /Center
          /SplitLayoutPanel$2
      /West
      Center
  /SplitLayoutPanel$1
  </code></pre>
  
  <p>My problems are with the <code>ScrollPanel</code> in the <code>TabPanel</code>, which in itself contains a <code>VerticalPanel</code> containing several widgets. This is true for each <code>Tab</code> in the <code>TabPanel</code>.</p>
  
  <p>My problem is that, while the width's for all containers in <code>SplitLayoutPanel$2</code>'s center have 100% width, the <code>ScrollPanel</code> contains a horizontal scrollbar with a considerable white area next to it's <code>VerticalPanel</code>, while they are in absolute metrics the same size.</p>
  
  <p><strong>Illustrating the situation</strong></p>
  
  <p><a href="https://i.stack.imgur.com/A8Pjg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A8Pjg.png" alt="overview of the TabPanel"></a>
  </p>
  
  <p>This is the <code>TabPanel</code>, with <code>ScrollPanel</code>, and <code>VerticalPanel</code>. Notice how the horizontal scrollbar exists, while the <code>TabPanel</code>, <code>ScrollPanel</code> and <code>VerticalPanel</code> have the same width. Scrolling to the right yields a white area.</p>
  
  <p><img src="https://i.stack.imgur.com/sQP1w.png" alt="Scroll- and Vertical panel details"></p>
  
  <p>The <code>ScrollPanel</code> and <code>VerticalPanel</code> all sport an absolute width of 598px. The West component of the <code>DockLayoutPanel</code> has a size of 600, so that matches. Also notice how bringing up the developer console has made the scrollbar disappear. In fact, the entire panel has disappeared behind it, and no vertical scrollbar pops up.</p>
  
  <p><img src="https://i.stack.imgur.com/nbw8E.png" alt="Scrolled"></p>
  
  <p>When scrolling the bar to the right, the <code>VerticalPanel</code> gets partially placed off screen, and the <code>ScrollPanel</code> shows this whitespace. Obviously, I don't want the whitespace to be there, so there won't be need for a scrollbar at all. All panels in this situation still have the same width: 598px. Resizing the <code>SplitLayoutPanel</code>, using the border to the right, increases these values (obviously), but the panels do still share equal width and the whitespace remains the same size, while I'd expect it to get wider too.</p>
  
  <p>The second tab contains a load of text, which continues off the screen, but no scrollbars appear.</p>
  
  <p><strong>Problem conclusion</strong></p>
  
  <ul>
  <li>No vertical scrollbars</li>
  <li>A horizontal scrollbar with some magically summoned whitespace</li>
  <li>Compontents claim to have equal width</li>
  </ul>
  
  <p>Any help is greatly appreciated.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Have tried resizing the <code>VerticalPanel</code> to 90 or 80% width. The whitespace seems unaffected and it shows that 100% really covers the visible width and not more.</p>