Scrollbar issue

[salvin francis]

This is really weird,
We have an app with a horizontal splitter, I need to place content in the right side of splitter,
the content should be 2 elements:

a "Header"
a "Right content"

This was the requirement:
1. Header should be always on top: meaning the horizontal splitter panel should not have a scrollbar @ right widget
2. Right content should be a container with scrollbar, it should occupy 100% of the area, it will internally have scroll bars to fit its content.

Here is the code i tried:

public class MyEntryPoint implements EntryPoint 
{

    /**
     * This is the entry point method.
     */
    public void onModuleLoad()
    {
	int height = 300; // This would be dynamically calculated
        
        HorizontalSplitPanel hp = new HorizontalSplitPanel();
        hp.setWidth("100%");
        hp.setHeight(height + "px");
        hp.setSplitPosition("300px");
        
        //-- code
	//Grid will occupy 100% of the right of the splitter so that the splitter does not
	//get any scrollbars
        Grid grid = new Grid(2,1);
        grid.setBorderWidth(1);
        grid.setCellPadding(0);
        grid.setCellSpacing(0);
        grid.setWidth("100%");
        grid.setHeight("100%");
        
        grid.setWidget(0, 0, new Label("Always on Top Header"));
        grid.getCellFormatter().setHeight(0, 0, "16px");

        SimplePanel rightWidget = new SimplePanel();
        rightWidget.setWidget(new Label("Right content"));
        rightWidget.setWidth("600px");
        rightWidget.setHeight("700px");
        
        ScrollPanel scroller = new ScrollPanel();
        scroller.setWidget(rightWidget);
        scroller.setWidth("100%");
        scroller.setHeight("100%");
        DOM.setStyleAttribute(scroller.getElement(), "border", "1px solid red");
        grid.setWidget(1, 0, scroller);
        //-- code
        
        SimplePanel leftWidget = new SimplePanel();
        leftWidget.setWidget(new Label("Navigation Panel"));
        leftWidget.setWidth("400px");
        leftWidget.setHeight("500px");
        
        hp.setLeftWidget(leftWidget);
        hp.setRightWidget(grid);
        RootPanel.get().add(new Label("Before"));
        RootPanel.get().add(hp);
        RootPanel.get().add(new Label("After"));
    }
}

[salvin francis]

Here is a screenshot in firefox.

[salvin francis]

I believe the issue is caused because of this:

Scroll bars inside or outside of box? >> http://css-tricks.com/the-css-overflow-property/

Any ideas how i should tackle this issue ?

In No scenario should "Always on Top Header" Label have a scrollbar at its side
also there should not be a double scrollbar.

Check attachment.

[salvin francis]

i am suprised i didnt get any response for my question,
however i did manage to crack this myself using unconventional means.
I used a flowpanel instead of a vertical panel and it worked fine.

Hope this helps someone:

    HorizontalSplitPanel horizontalSPanel;
    
    ScrollPanel viewScrollPane;
    /**
     * This is the entry point method.
     */
    public void onModuleLoad()
    {
	final int height = 300; //will be dynamically generated
        
        horizontalSPanel = new HorizontalSplitPanel();
        horizontalSPanel.setWidth("100%");
        horizontalSPanel.setHeight(height + "px");
        horizontalSPanel.setSplitPosition("300px");

        //content below the header...
        SimplePanel displayPanel = new SimplePanel();
        displayPanel.setWidget(new Label("Right content"));
        displayPanel.setWidth("600px");
        displayPanel.setHeight("700px");
        
        //Header
        Label viewHeader = new Label("Header");        
        
        FlowPanel rightContentPanel = new FlowPanel();
        rightContentPanel.add(viewHeader);
        
        //scrollpanel to hold the content.
        viewScrollPane = new ScrollPanel(){
            /* (non-Javadoc)
             * @see com.google.gwt.user.client.ui.Panel#onLoad()
             */
            @Override
            protected void onLoad()
            {
                super.onLoad();
                resizeRightContent(16 ,height); //16 viewheader height
            }
        };
        viewScrollPane.add(displayPanel);
        viewScrollPane.setWidth("100%");        
        rightContentPanel.add(viewScrollPane);
        
        //set up left widget...
        SimplePanel leftWidget = new SimplePanel();
        leftWidget.setWidget(new Label("Navigation Panel"));
        leftWidget.setWidth("400px");
        leftWidget.setHeight("500px");
        
        horizontalSPanel.setLeftWidget(leftWidget);
        horizontalSPanel.setRightWidget(rightContentPanel);
        RootPanel.get().add(new Label("Before"));
        RootPanel.get().add(horizontalSPanel);
        RootPanel.get().add(new Label("After"));
    }

    /**
     * @param scrollPanel
     * @param viewHeader
     * @param height
     */
    protected void resizeRightContent(int viewHeaderHeight, int height)
    {
        viewHeaderHeight+=5;
        double percentageHeight = 100.0-(((viewHeaderHeight*1.0)/height)*100.0); 
        viewScrollPane.setHeight(Math.ceil(percentageHeight)+"%");
    }