Горизонтальная панель прокрутки не отображается с CellTree - PullRequest
Новая
       6

Горизонтальная панель прокрутки не отображается с CellTree

2 голосов
/ 21 октября 2011

У меня есть Celltree внутри ScrollPanel.Я устанавливаю размер ScrollPanel в UIBinder следующим образом: 

<!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>

В моем классе Java у меня есть следующее: 

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

Моя проблема в том, что при заполнении CellTreeГоризонтальная полоса не отображается, даже содержимое переполняется.Вертикальная полоса отображается нормально.

Спасибо

Обновление

Используя FireBug, я вижу, что проблема в element.style { overflow: hidden; }

Кажется, что это встроенный CSS, который переопределяет мой CSS.Есть ли способ изменить это?

Ответы [ 2 ]

6 голосов
/ 26 октября 2011

Решение LIENMAN78 немного сложнее. Ну ... После нескольких часов поиска я нашел простое решение: обернуть CellTree в HorizontalPanel (или VerticalPanel), а затем добавить его в ScrollPanel

Вот CellTree.ui.XML 

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

И соответствующая часть CellTree.java 

...
@UiField HorizontalPanel panel; 
...
panel.add(cellTree)
1 голос
/ 26 октября 2011

Это не самое красивое решение, но вот быстрое решение. 

/* 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;
}

Вы можете сохранить .cellTreeWidget как есть, если вы переопределяете CellTree.Style, но если вы хотите просто сделать это быстро и грязно, измените его на любое имя стиля, добавленное в CellTree.

Вы можете сделать это только один раз и выполнить замену в модуле xml, чтобы, когда CellTree вызывал GWT.create (Resource.class) внутри, он автоматически заменялся версией с вашим исправлением. 

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