Horizontal scrollPanel not displaying with CellTree

Question

I have a Celltree inside a ScrollPanel. I set the size of the ScrollPanel in the UIBinder as follow

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">

   <g:ScrollPanel ui:field="panel" width="240px" height="1200px"></g:ScrollPanel>
</ui:UiBinder>

In my Java class, I have the Following :

@UiField ScrollPanel panel;
public Arborescence() {
     initWidget(uiBinder.createAndBindUi(this));


      // Create a model for the tree.
        TreeViewModel model = new CustomTreeModel();

        /*
         * Create the tree using the model. We specify the default value of the
         * hidden root node as "Item 1".
         */
        CellTree tree = new CellTree(model, "Item 1");         
        panel.add(tree);
}

My problem is when I populate the CellTree, the Horizontal bar is not displaying, even the content is overflowing. The Vertical bar is displaying fine.

Thanks

Update

Using FireBug, I see that the problem comes from element.style { overflow: hidden; }

It seems that it's an inline CSS that Override my CSS. Is there any way to change it ?

Momo · Accepted Answer · 2012-01-13T14:46:27.713

5

The LIENMAN78's solution is a little bit complicated. Well...After hours of searching, I found a simple solution : Wrapping the CellTree into a HorizontalPanel (or VerticalPanel) and then add it to the ScrollPanel

Here is the CellTree.ui.XML

<g:ScrollPanel  width="100%" height ="1200px">
             <g:HorizontalPanel ui:field="panel">
             </g:HorizontalPanel>
   </g:ScrollPanel>

And the relevant part of CellTree.java

...
@UiField HorizontalPanel panel; 
...
panel.add(cellTree)

edited Jan 13 '12 at 14:46

answered Oct 26 '11 at 14:08

Momo

2,471
5
31
52

+1 This also solves the problem of the background not extending all the way for items wider than the frame. – LINEMAN78 Oct 26 '11 at 17:13
When I try this, the scroll panel just expands to contain the HPanel inside it and doesn't display horizontal scroll bars.... do you have any special CSS or other trick to get a ScrollPanel to actually act as a HorizontalScrollPanel? – Andrew Mackenzie Nov 29 '11 at 11:34
@Andrew, there is no CSS involved here, just make sure that the ScrollPanel or the Panel that contains it has a fixed size (width and height) – Momo Nov 29 '11 at 21:34
Could someone who has this working please post a working set of .gwt.xml and .java and .css that I could use as a starting point to get my code working? My code fragments already match those here and it doesn't work for me... Thanks a million!!! – Andrew Mackenzie Dec 12 '11 at 19:25
1

OK, got it working now. For reference for others, I had mine inside a VerticalPanel (uses tables) and that seemed to break it... – Andrew Mackenzie Dec 12 '11 at 20:24

score 1 · Answer 2 · answered Oct 26 '11 at 03:02

It's not the prettiest solution, but here is a quick fix.

/* fix horizontal scroll issue */
.cellTreeWidget>div,
   .cellTreeWidget>div>div>div>div>div,
   .cellTreeWidget>div>div>div>div>div>div>div>div>div
{
    overflow: visible !important;
}

You can keep .cellTreeWidget as is if you are overriding CellTree.Style, but if you want to just do it quick and dirty change it to whatever the style name you added to the CellTree.

You can do this just once and do a replace-with in your module xml so that when CellTree calls GWT.create(Resource.class) internally it automatically gets replaced by a version with your fix.

<replace-with class="com.foo.common.client.gwt.laf.resource.CellTreeResources">
    <when-type-is class="com.google.gwt.user.cellview.client.CellTree.Resources" />
</replace-with>


public class CellTreeResources implements CellTree.Resources
{
    @Override
    public ImageResource cellTreeClosedItem()
    {
        return CellBrowserResourcesImpl.INSTANCE.cellTreeClosedItem();
    }

    @Override
    public ImageResource cellTreeLoading()
    {
        return LoadingResource.INSTANCE.loadingBar();
    }

    @Override
    public ImageResource cellTreeOpenItem()
    {
        return CellBrowserResourcesImpl.INSTANCE.cellTreeOpenItem();
    }

    @Override
    public ImageResource cellTreeSelectedBackground()
    {
        return CellBrowserResourcesImpl.INSTANCE.cellTreeSelectedBackground();
    }

    @Override
    public Style cellTreeStyle()
    {
        return CellBrowserResourcesImpl.INSTANCE.cellTreeStyle();
    }

    public interface CellBrowserResourcesImpl extends CellTree.Resources
    {
        static final CellBrowserResourcesImpl INSTANCE = GWT.create(CellBrowserResourcesImpl.class);

        @Override
        @Source({ CellTree.Style.DEFAULT_CSS, "cellTree.css" })
        Style cellTreeStyle();
    }
}

Horizontal scrollPanel not displaying with CellTree

2 Answers2