GWT: дополнение Изменения древовидных строк?
Дерево 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 но это кажется hacky. Существует ли более изящный путь?
Разрешение: По-видимому, нет более изящного пути. Вот то, что мы сделали, 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;
}
2 ответа
Вы можете сделать это так:
<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>
Обратите внимание, что div .gwt-Tree повлияет на все дочерние div, поэтому у вас есть чтобы вернуть их к желаемому стилю с помощью .gwt-Tree div .gwtTreeItem.
О "hacky>" вы сказали -> селектор поддерживается во всех браузерах, кроме IE6, который его не распознает.
Я просмотрел Древовидную документацию GWT . Правила стиля CSS для дерева и элементов дерева:
Правила стиля CSS
.gwt-Tree
само дерево.gwt-Tree .gwt-TreeItem
элемент дерева.gwt-Tree .gwt-TreeItem-selected
выбранный элемент дерева
Возможно, вы захотите добавить отступы к .gwt-Tree .gwt-TreeItem и к .gwt- Дерево .gwt-TreeItem-selected