getting HorizontalSplitPanel to behave like the demo

Vaadin UI experts:
When I look at the vaadin demo at


http://demo.vaadin.com/sampler/#ui/structure/horizontal-split-panel

I see a horizontal split panel behaving like I want, with independent scroll bars for each side of the split. The code for this is very simple, and cut-and-pasted here:

sample = new HorizontalSplitPanel();
sample.setSizeFull();
sample.setSplitPosition(150, Unit.PIXELS);
sample.setFirstComponent(new Label(ExampleUtil.lorem, ContentMode.HTML));
sample.setSecondComponent(new Label(ExampleUtil.lorem, ContentMode.HTML));

I cannot replicate this behavior. My application has a tabsheet at the top level, so to try and figure out what was wrong, I created the following custom component to hold the example:

import com.example.filebrowser.util.ExampleUtil;
import com.vaadin.shared.ui.label.ContentMode;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.HorizontalSplitPanel;
import com.vaadin.ui.Label;
import com.vaadin.ui.Layout;
import com.vaadin.ui.VerticalLayout;

public class PlaygroundComposite extends CustomComponent {
    private static final long serialVersionUID = 1L;

    public PlaygroundComposite(){
        Layout layout = new VerticalLayout();
        layout.setHeight(null); // no effect
        //layout.setSizeFull(); // no effect
        setCompositionRoot(layout);
        HorizontalSplitPanel sample = new HorizontalSplitPanel();
        // sample code
        sample.setSizeFull(); 
        sample.setSplitPosition(150, Unit.PIXELS); // as per sample
        sample.setFirstComponent(new Label(ExampleUtil.lorem, ContentMode.HTML));
        sample.setSecondComponent(new Label(ExampleUtil.lorem, ContentMode.HTML));
        // end of sample code
        layout.addComponent(sample);
    }
}

Then in an effort to make things as simple as possible, I took out the code for my tabs and added the PlaygroundComposite in its own tab here is the pared-down constructor:

public class FilebrowserUI extends UI implements Actionable, UriFragmentChangedListener{
    LoginComposite loginComposite = null;
    ReportBrowserComposite rbComposite = null;
    @Override
    protected void init(VaadinRequest request) {
       
        final VerticalLayout layout = new VerticalLayout();
       //layout.setHeight(null); // no effect
        layout.setSizeFull(); // no effect
      
        setContent(layout);
        TabSheet tabs = new TabSheet();
        //tabs.setHeight(100.0f, Unit.PERCENTAGE); // no effect
        
        layout.addComponent(tabs);
        PlaygroundComposite playgroundComposite = new PlaygroundComposite();
        final VerticalLayout playgroundLayout = new VerticalLayout(playgroundComposite);
        //playgroundLayout.setSizeFull(); // no effect
        playgroundLayout.setHeight(null); // no effect
        float peek = playgroundLayout.getHeight();
        System.out.println("playground height:"+peek);
        tabs.addTab(playgroundLayout, "playground");
        
        getPage().addUriFragmentChangedListener(this); 
    }

So now my layout hierarchy is just:
VerticalLayout layout
TabSheet tabs
VerticalLayout playgroundLayout
PlaygroundComposite playgroundComposite
Layout layout
HorizontalSplitPanel sample
However, no matter what I do to the size of the components containing sample, the result is an application with one global scroll bar off to the side (see attached).
I’ve looked throught the forum, but I cannot find anyone with this problem in such a simple form.
Although the BoV is very good, I don’t see this covered in section 6.3 (I am using Vaadin 7.1.7).

What on earth am I missing here?

13444.png

I found the problem after reading the layout chapter more carefully a second time. Please disregard.

I am having the same issue. How did you fix yours?