How to show horizontal and vertical scrollbars in VerticalSplitPanel?

Hi,
I have a tree component that is added to a VerticalSplitPanel. I need the tree to grow to use the horizontal and vertical space provided to it by the VerticalSplitPanel, but if that space isn’t large enough to fit the component, it needs to provide the appropriate horizontal and/or vertical scrollbars around the tree.

I can get the horizontal scroll bar to show up OK, but the vertical scrollbar will not appear.

I tried wrapping the tree in a Panel as well as a HorizontalLayout but I was unable to get it to work as desired.

Any advice would be appreciated. What follows is some example code for replicating the problem.

public class DemoApplication extends Application {

@Override
public void init() { 	
	final Tree tree = new Tree();
	tree.setSelectable( true );
	tree.setContainerDataSource( createTreeData() );
	tree.expandItemsRecursively( "Root" );
	
	Panel right = new Panel();
	right.setSizeFull();
	
	HorizontalSplitPanel splitter = new HorizontalSplitPanel();
	splitter.setFirstComponent( tree );
	splitter.setSecondComponent( right );
	
	Window window = new Window( "Vaadin - Hierarchy" );
	window.setContent( splitter );
	setMainWindow( window );
}

public static HierarchicalContainer createTreeData() {
    HierarchicalContainer data = new HierarchicalContainer();
    String root = "Root";
    data.addItem( root );
    for( int i = 0; i < 5; ++i ) {
    	String node0 = "Node: "+ i;
		data.addItem( node0 );
		data.setParent( node0, root );
		
    	for( int j = 0; j < 5; ++j ) {
    		String node1 = "Node: "+ i +","+ j;
			data.addItem( node1 );
			data.setParent( node1, node0 );
			
    		for( int k = 0; k < 5; ++k ) {
    			String node2 = "Node: "+ i +","+ j +","+ k;
    			data.addItem( node2 );
    			data.setParent( node2, node1 );
    			data.setChildrenAllowed( node2, false );
    		}
    	}
    }
    
    return data;
}

}

Hi,

Can’t say directly what the problem could be, it looks very much like
basic SplitPanel book example
. Not sure why the horizontal scroll bar doesn’t show up in that example though.

One problem could be if the SplitPanel doesn’t have a defined height, but it has full size by default, so that shouldn’t be a problem. The Tree has to have undefined height, but that’s the default so it shouldn’t be a problem either.

You could Firebug the layout elements a bit. The v-splitpanel-first-container element should have “overflow: auto”.

You should also be able to have a Panel in the SplitPanel cell, and then get scroll bars. Can’t say why that doesn’t work either. The entire Book Examples application has a bit similar layout, but with a HorizontalLayout instead of HorizontalSplitPanel. The sources are
here
.

As per your recommendation, I checked v-splitpanel-first-container and it does indeed have “overflow: auto”.

However, I noticed that the v-tree style had the value “overflow: hidden”. Changing this to “overflow: visible” fixed my problem.

The solution I came up with for this issue breaks whenever I try to add the tree to a Panel, which I needed to do while working on this item (
Auto-scroll on drag (Tree)
).

Previously, the element with “overflow:auto” (which I will call the container) immediately contained the tree component and the container had setSizeFull() so that it would fit the available space. However, when you add the tree to a panel, you end up with a bunch of intermediate div elements which have “overflow:hidden” in their style attribute. These intermediate divs are also manually set their width and height. The height appears to mirror the height of the tree component, and hence I can the vertical scroll bar to show up, however their width is set according to whatever space the split panel provides, irrespective of the width of the tree. So the horizontal scrollbar will not appear because the overflow is hidden.

Since “overflow: hidden” is set in the style attribute, I cannot override it within my style.css file.

Here’s what I am seeing in firebug:

So looking at this I have a few questions:
why do these divs exist?
why are their styles set via the style-attribute such that I can’t override them in css?
why do they consider the height of the contained widget, but not its width when setting their absolute size?
Why do they set “overflow: hidden”?

And, most importantly…

what can I do to make the horizontal scroll bar appear in the tree’s container?

Here’s a bit of sample code that replicates the new problem:

@Override
public void init() {
	final Tree tree = new Tree();
	tree.setImmediate( true );
	tree.setSelectable( true );
	tree.setContainerDataSource( createTreeDataOld() );
	tree.expandItemsRecursively( "Root" );
	
	Panel left = new Panel( new VerticalLayout() );
	left.setSizeFull();
	left.addComponent( tree );
	    	
	Panel right = new Panel();
	right.setSizeFull();
	
	HorizontalSplitPanel splitter = new HorizontalSplitPanel();
	splitter.setFirstComponent( left );
	splitter.setSecondComponent( right );
	
	Window window = new Window( "Vaadin - Hierarchy" );
	window.setContent( splitter );
	setMainWindow( window );
}

The meaning of all the div structures is so arcane knowledge that their reason escapes even me. Understanding it would require journeying deep into the Underworld, but as all the mushrooms around here are still badly irradiated by the Chernobyl fallout, I dare not try it.

Notice that the Panel always has a root layout, which is a VerticalLayout by default. That creates one div layer. The “overflow: hidden” properties are for the root layout, which is OK. It’s height looks very large, so I assume that it should cause the scroll bars to appear.

The settings in the style attribute are generated during rendering. In some cases, they are generated from the CSS, such as for the layout margin element. For example, if you set margin for the v-verticallayout-margin element, the div element won’t actually have that style name, and it will have the margin settings in the style attribute. This can look very confusing…

So, the div structure looks OK. I also don’t see a problem with your latest code example, it should work. I have no idea why it doesn’t.

Trying to clear things up…

[b]
The Panel's content div, obviously
[/b]
<div class="v-panel-content v-panel-content-light" tabindex="-1" style="overflow: auto; position: relative; height: 244px;">
  [b]
The root element of the layout
[/b]
  <div style="overflow: hidden; width: 211px; height: 3122px;" class="v-verticallayout">
    [b]
The margin element of the layout
[/b]
    <div style="overflow: hidden; margin: 0px; width: 211px; height: 3122px;">
         [b]
The layout slot's div element, needed mainly for expand ratios
[/b]
	 <div style="height: 3122px; width: 211px; overflow: hidden; padding-left: 0px; padding-top: 0px;">
            [b]
The alignment element of the layout slot
[/b]
	    <div style="float: left; margin-left: 0px;">
               [b]
The child component's root element
[/b]
	       <div tabindex="0" class="v-tree">

Many of those elements could be removed, if we refactored much of our layout code, but at this point it is not feasible. Vaadin 7 might address these issues (at least I hope so). The reason why things are so complex is cross browser compatibility (from around three years ago, IT Mill Toolkit 5.3 era, things were even worse back then with FF1.5, Safari 2 and stuff like that).

Because they are the internal implementation details of the layout, and should not be overridden. If you know what you’re doing, you can override them using the “!important” keyword in your CSS properties.

At least I see many “width: 211px” values there? The Panel’s content element is just as wide as the Panel’s root element allows, hence no width specified.

Again, for cross browser compatibility. IE6 misbehaves badly if those are not set.

At least looking from the code snippet from the other post, where to panels (left and right) are used, they both set the root layout of the Panels as a VerticalLayout.
Because VerticalLayout is by default 100% wide, it will clip everything that overflows its width.

So you need to set the width of the Panels’ layouts to undefined.

Thank you both for all the tips and information :slight_smile:

I’m using VerticalSplitPanel.
when i resize my windows, the vertical scrollbar appears but no horizontal scrollbar.
Could you please tell me what can i do to be able to see the horizontal scrollbar when i resizes my windows.
here is my code:

hsplit = new HorizontalSplitPanel();
hsplit.setSplitPosition(13, Unit.PERCENTAGE);

        // Set the 1 pixel wide small style
        hsplit.addStyleName(Reindeer.SPLITPANEL_SMALL);

        vsplit.setSecondComponent(hsplit);
        Panel treePanel = new Panel();
        treePanel.setHeight(100, Unit.PERCENTAGE);
        treePanel.setContent(treeDataSourceManager.getView());
        treePanel.setStyleName("tree-panel");
        hsplit.setFirstComponent(treePanel);

        navbar = new VerticalLayout();

        GridLayout secondaryNavBar = new GridLayout(3, 1);
        secondaryNavBar.setWidth("100%");
        secondaryNavBar.addComponent(userPreferencesBar, 0, 0);
        secondaryNavBar.addComponent(paginationView, 2, 0);

        navbar.addComponent(alphaNavigationView);
        navbar.addComponent(secondaryNavBar);

        [b]

thirdPartLayout = new VerticalSplitPanel();
[/b]
thirdPartLayout.setStyleName(“thirdPart”);
thirdPartLayout.setFirstComponent(navbar);
thirdPartLayout.setSplitPosition(60, Unit.PIXELS);

        thirdPartLayout.setSecondComponent(mwiListResultView);
        hsplit.setSecondComponent(thirdPartLayout);

public class MwiListResultView extends CustomComponent {

public MwiListResultView() {

    setSizeUndefined();
    setCompositionRoot(getResultLayout());
    
}

private VerticalLayout getResultLayout() {
   

    VerticalLayout resultLayout = new VerticalLayout();
    resultLayout.setStyleName("mwiWorksResultLayout");
    resultLayout.setWidth("1380px");
    resultLayout.setId("mwiResultLayoutPrint");


    return resultLayout;

}

}

Horizontal scrollbar was there but doesn’t appear.
By setting marging to true on the root layout the horizontal scrolbar appears.
It’s a bug of vaadin I reproduce it on firefox v41.0.2 and chrome Version 45.0.2454.85 m