Блог

Главная - Вопросы по программированию - Горизонтальная панель прокрутки не отображается с CellTree

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

#gwt #user-interface #scrollpane

#gwt #пользовательский интерфейс #область прокрутки

Вопрос:

У меня есть Celltree внутри 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. Есть ли какой-либо способ изменить это?

Ответ №1:

Решение 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. 1 Это также решает проблему, связанную с тем, что фон не распространяется полностью на элементы шире рамки.

2. Когда я пытаюсь это сделать, панель прокрутки просто расширяется, чтобы содержать HPanel внутри нее, и не отображает горизонтальные полосы прокрутки…. есть ли у вас какой-либо специальный CSS или другой трюк, чтобы заставить ScrollPanel фактически действовать как HorizontalScrollPanel?

3. @Andrew, здесь не задействован CSS, просто убедитесь, что панель прокрутки или панель, которая ее содержит, имеет фиксированный размер (ширина и высота)

4. Может ли кто-нибудь, у кого это работает, опубликовать рабочий набор.gwt.xml и .java и .css, которые я мог бы использовать в качестве отправной точки, чтобы заставить мой код работать? Мои фрагменты кода уже соответствуют приведенным здесь, и у меня это не работает… Спасибо миллион!!!

5. Хорошо, теперь это работает. Для справки для других, у меня была своя внутри VerticalPanel (использует таблицы), и это, казалось, сломало ее…

Ответ №2:

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

 /* 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.Стиль, но если вы хотите просто сделать это быстро и грязно, измените его на любое имя стиля, которое вы добавили в 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();
    }
}
Метки: