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 ?

Answer 1

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)