Horizontal scrollPanel not displaying with CellTree - gwt

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)

Answer 2

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();
}
}