Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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>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>
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.
Asked: 2008-07-22 19:52:34 +0800
Seen: 355 times
Last updated: Jul 19 '12
