GWT: Изменить заполнение строк дерева? - PullRequest
5 голосов
/ 22 марта 2010

Дерево GWT выглядит примерно так:

<div class="gwt-Tree">
    <div style="padding-top: 3px; padding-right: 3px;
                padding-bottom: 3px; margin-left: 0px;
                padding-left: 23px;">
         <div style="display:inline;" class="gwt-TreeItem">
              <table>
                   ...
              </table>
         </div>
    </div>
    <div ...>
    </div>
    ...
</div> 

Мой вопрос: как мне изменить отступы отдельных строк дерева? Я полагаю, я мог бы сделать что-то вроде установки правил CSS для .gwt-Tree > div, но это кажется хакерским Есть ли более элегантный способ?


Разрешение: Очевидно, что нет более элегантного способа. Вот что мы сделали, FWIW:

 .gwt-Tree > div:first-child { 
      width: 0px !important; 
      height: 0px !important; 
      margin: 0px !important; 
      padding: 0px !important; 
 } 

 .gwt-Tree > div {
      padding: 0px 5px !important;
 }

 .gwt-Tree > div[hidefocus=true] {
      width: 0px !important;
      height: 0px !important;

      margin: 0px !important;
      padding: 0px !important;
 }

Ответы [ 3 ]

3 голосов
/ 08 июля 2011

У меня была такая же проблема, и я пытался решить ее с помощью CSS, но безуспешно Наконец мне удалось изменить верхний и нижний отступы в коде Java:

/**
    * handle top and bottom padding issue of leafs the grandparent DOM element (div) has disturbing top and bottom
    * padding of 3px, which is changed here to 0px
    * 
    * @param uiObject
    *           uiObject which is a leaf in the tree
    */
   private static void correctStyle(final UIObject uiObject) {
      if (uiObject instanceof TreeItem) {
         if (uiObject != null && uiObject.getElement() != null) {
            Element element = uiObject.getElement();
            element.getStyle().setPaddingBottom(0, Unit.PX);
            element.getStyle().setPaddingTop(0, Unit.PX);
         }
      } else {
         if (uiObject != null && uiObject.getElement() != null && uiObject.getElement().getParentElement() != null
               && uiObject.getElement().getParentElement().getParentElement() != null
               && uiObject.getElement().getParentElement().getParentElement().getStyle() != null) {
            Element element = uiObject.getElement().getParentElement().getParentElement();
            element.getStyle().setPaddingBottom(0, Unit.PX);
            element.getStyle().setPaddingTop(0, Unit.PX);
         }
      }
   }

Я использую такой метод в коде:

Anchor fileDownloadLink = new Anchor();
fileDownloadLink.setStyleName(ViewConstants.STYLE_LINK_FILE_DOWNLOAD);
fileDownloadLink.setText(subSubStructure.getName());
fileDownloadLink.setHref(ViewConstants.HREF_DOWNLOAD_FILE_EXTRACTED_DATA + subSubStructure.getPath());
treeItem.addItem(fileDownloadLink);
StyleCorrector.correctStyle(fileDownloadLink);
2 голосов
/ 22 марта 2010

Вы можете сделать это так:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
    .gwt-Tree {background:green;}
    .gwt-Tree div {padding-top: 3px; padding-right: 3px;padding-bottom: 3px; margin-left: 0px;padding-left: 23px;background:gray;}
    .gwt-Tree div .gwt-TreeItem {padding:0;margin:0;background:red;color:#fff;}
    </style> 
</head>
<body>
<div class="gwt-Tree">
    <div>
         <div class="gwt-TreeItem">
            random
         </div>
    </div>
    <div>
         <div class="gwt-TreeItem">
            random
         </div>
    </div>
</div> 
</body>
</html>

Обратите внимание, что .gwt-Tree div повлияет на все дочерние элементы div, поэтому вам нужно сбросить их обратно в нужный вам стиль с .gwt-Tree div .gwtTreeItem.

О "hacky>", который вы сказали -> селектор поддерживается во всех браузерах, кроме IE6, который его не распознает.

0 голосов
/ 22 марта 2010

Я взглянул на GWT Tree Documentation . Правила стиля CSS для дерева и элементов дерева:

Правила стиля CSS

.gwt-Tree
само дерево

.gwt-Tree .gwt-TreeItem
элемент дерева

.gwt-Tree .gwt-TreeItem-selected
выбранный элемент дерева

Возможно, вы захотите добавить заполнение к .gwt-Tree .gwt-TreeItem и к .gwt-Tree .gwt-TreeItem-selected

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...