# Treecell text wrapping no lined up

ansancle
317 9

If you cut and past the following code into the zkdemo you will see that the the text does not wrap and line up under the startpoint for the parent but goes all the way to the left under the image. Is there a way to make it line up nicely? I tried the use of div with the style set as described in another post but that made it worse. It would be nice if the start of the second line of text lined up under the first word on the first line.

<window title="tree demo" border="normal">
<style>
.treeCellWithImage
{
background:URL(/zkdemo/img/folder.gif) no-repeat;
}
</style>
<tree id="tree" width="100px" rows="5">
<treecols sizable="true">
<treecol label="Name"/>
</treecols>
<treechildren>
<treeitem>
<treerow>
<treecell sclass="treeCellWithImage" label="This cell does not wrap nicely"/>
</treerow>
</treeitem>
</treechildren>
</tree>
</window>

delete retag edit

## 3 Replies

henrichen
3869 2

This is the CSS behavior. ZK cannot help much on this. Maybe you want to try a higher image and see if it works your way.

javamaniac
9

This is my solution.

To see a bigger example with images

<window title="tree demo" border="normal">
<style>
.treeCellWithImage
{
background:URL(/zkdemo/img/folder.gif) no-repeat;
}
span.z-tree-line,
span.z-tree-ico
{
display:block;
float:left;
width:18px;
}
.tree_item
{
margin-left: 20px;
margin-bottom:10px;
}
.tree_sous_item
{
margin-left: 40px;
margin-bottom:10px;
}
</style>
<tree id="tree" width="100px" rows="5">
<treecols sizable="true">
<treecol label="Name"/>
</treecols>
<treechildren>
<treeitem>
<treerow>
<treecell sclass="treeCellWithImage">
<div class='z-label tree_item'>This cell does not wrap nicely</div>
</treecell>
</treerow>
</treeitem>
</treechildren>
</tree>
</window>


jeffburton
21

I had the same problem. Using display:inline-block has been recommended elsewhere to make the wrapping work properly, but it only works when the element width is fixed.

What I ended up doing is using listbox and embedding a table in each row. The first cell of the table does the indenting and contains the expand/collapse icon. The second has the icon, and the last contains the content - which will wrap correctly and fill the rest of the space. It works beautifully, at least for small trees. I have not tried giant ones.

Part of the problem is html/css itself, which is poor at handling left over space. I know everyone hates tables, but at least that behavior is well defined for them.

[hide preview]