Hi,
I’m using TreeTable with Vaadin 6.8.10. When I’m running the application, the ‘padding-left’ style is not added to the ‘v-table-cell-wrapper’ class items. Is there something missing in my application like CSS? Why such behavior? (it doesn’t work in the same as in the demo application)
Thanks
Hi,
I still have this problem with vaadin 6.8.11. I’m using the following code :
public HierarchicalContainer createTreeContent(final Application application, final Collection<Object> root) {
final HierarchicalContainer container = new HierarchicalContainer();
container.addContainerProperty(TREE_PROPERTY_NAME, CheckBox.class, "");
new Object() {
public void put(final Collection<Object> items, final Object parent, final HierarchicalContainer container) {
for (final Object item : items) {
addItem(container, item.getId(), item.getName(), parent, item.hasChild());
if (item.hasChild()) {
put(item.getChilds(), item.getId(), container);
}
}
}
}.put(root, null, container);
}
private void addItem(final HierarchicalContainer container, final Long id, final String name, final Object parent,
final boolean childAllowed) {
// Support both ITEM_CAPTION_MODE_ID and ITEM_CAPTION_MODE_PROPERTY
final CheckBox itemSelect = new CheckBox(name);
container.addItem(id);
mapIdCheckBox.put(id, itemSelect);
// itemSelect.setStyleName("small");
itemSelect.setImmediate(true);
itemSelect.setValue(checked.contains(id));
itemSelect.addListener(new Button.ClickListener() {
@Override
public void buttonClick(final ClickEvent event) {
...
}
});
container.getItem(id).getItemProperty(TREE_PROPERTY_NAME).setValue(itemSelect);
container.setChildrenAllowed(id, childAllowed);
container.setParent(id, parent);
}I use somthing similar to the example given on the book samples.
The result under chrome still the same for each item :
<span class="v-treetable-treespacer v-treetable-node-open"></span>Instead of
<span class="v-treetable-treespacer v-treetable-node-open" style="width: 36px;"></span>under books samples demo.
Is any mistake in the source code ?
Thanks.
The style=“width: 36px;” normally appears when you set the width in you code using the Component.setWidth(“36px”); method.
If you want to add your own padding you need a css class which you add to your style.css (e.g.: v-treetable-yourclass or just .yourclass). Then you can use Component.setStyleName(“yourclass”); or Component.addStyleName(“yourclass”); to add it to the component.
After that the name of the class should appear in the actual html but the css which is affecting the component is only visible in the css part of a browser developer tool.
Using
component.setWidth()
does not solve the problem. My code is based on
book samples
. My application does not have the same behavior as the one in book sample.
So to summarize your problem: You are trying to add padding to the v-table-cell-wrapper css class but it’s not applied.
Do you use !important?
Can you post the css class you are using?
If it’s a custom one and not the v-table-cell-wrapper class you are using could you point out where you’re setting/adding the style?
After some trys, I return to the initial question, the
padding-left
style is not apply to the
v-table-cell-wrapper
class items. But it’s works fine in the case of a treetable display as a tab sheet.
I do not use a custom css.
And about what padding-left are you talking? I just had a look at the example you linked to with the chrome dev tool and on the items with the class v-table-cell-wrapper there is no padding-left style. There is also none in the style.css class for the v-table-cell-wrapper class.
I don’t understand what make the difference between my application and the sample.
In one case, tabsheet panel, my application add padding-left settings that fix the problem.
In other cases, inside vertical layout, my application generate the same html structure for the treetable as the books sample but in that case the item lable is displayed at the beginning of the row (instead of child aligned position).
I’m using treetable 1.2.2. Books sample might use a different version.
At the current state, the treetable works fine in some places, and still have the problem with padding-left in others places.
The source code is the same in both places
...
final HierarchicalContainer container = createTreeContent(MyItems);
treeMyItem = new TreeTable();
tabsheet.addTab(treeMyItem, "Items");
treeMyItem.setSizeFull();
treeMyItem.setContainerDataSource(container);
// Set tree to show the 'name' property as caption for items
treeMyItem.setItemCaptionPropertyId(TREE_PROPERTY_NAME);
treeMyItem.setVisibleColumns(new Object[] {
TREE_PROPERTY_NAME
});
treeMyItem.setColumnHeaders(new String[] {
"name"
});
...
public HierarchicalContainer createTreeContent(final Collection<MyItem> rootMyItems) {
final HierarchicalContainer container = new HierarchicalContainer();
// A property that holds the caption is needed for
// ITEM_CAPTION_MODE_PROPERTY
container.addContainerProperty(TREE_PROPERTY_NAME, CheckBox.class, "");
new Object() {
public void put(final Collection<MyItem> MyItems, final Object parent, final HierarchicalContainer container) {
for (final MyItem MyItem : MyItems) {
mapIdMyItem.put(MyItem.getId(), MyItem);
addMyItemItem(container, MyItem.getId(), MyItem.getName(), parent, MyItem.hasChild());
if (MyItem.hasChild()) {
put(MyItem.getChilds(), MyItem.getId(), container);
}
}
}
}.put(rootMyItems, null, container);
return container;
}
private void addMyItemItem(final HierarchicalContainer container, final Long id, final String name, final Object parent,
final boolean childAllowed) {
// Support both ITEM_CAPTION_MODE_ID and ITEM_CAPTION_MODE_PROPERTY
container.addItem(id);
final CheckBox itemSelect = new CheckBox(name);
mapIdCheckBox.put(id, itemSelect);
itemSelect.setImmediate(true);
itemSelect.setValue(true);
itemSelect.addListener(new Button.ClickListener() {
@Override
public void buttonClick(final ClickEvent event) {
...
}
});
container.getItem(id).getItemProperty(TREE_PROPERTY_NAME).setValue(itemSelect);
container.setChildrenAllowed(id, childAllowed);
container.setParent(id, parent);
}
<td class="v-table-cell-content" style="width: 367px;">
<div class="v-table-cell-wrapper" style="width: 367px;">
<span class="v-treetable-treespacer v-treetable-node-open"></span><span class="v-checkbox"><input type="checkbox" value="on" id="gwt-uid-35" tabindex="0"><label for="gwt-uid-35">TEST</label></span></div></td>
<td class="v-table-cell-content" style="width: 405px;">
<div class="v-table-cell-wrapper" style="padding-left: 30px; width: 405px;">
<span class="v-treetable-treespacer" style="width: 30px;"></span>
<span class="v-checkbox"><input type="checkbox" value="on" id="gwt-uid-27" tabindex="0"><label for="gwt-uid-27">TEST11</label></span>
</div>
</td>
Which configuration or action can disable
padding-left
style while rendering?
After checking import, I was using
com.vaadin.addon.treetable.TreeTable
instead of
com.vaadin.ui.TreeTable
.