0

Treecell text wrapping no lined up

asked 2008-07-22 19:52:34 +0800

ansancle gravatar image 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 flag offensive retag edit

3 Replies

Sort by ยป oldest newest

answered 2008-07-30 15:34:16 +0800

henrichen gravatar image henrichen
3869 2
ZK Team

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.

link publish delete flag offensive edit

answered 2009-03-05 17:51:27 +0800

javamaniac gravatar image javamaniac
9

updated 2009-03-05 18:00:07 +0800

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>

link publish delete flag offensive edit

answered 2012-07-19 13:34:24 +0800

jeffburton gravatar image 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.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2008-07-22 19:52:34 +0800

Seen: 354 times

Last updated: Jul 19 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More