Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi all,
in a window, a tree is shown. This tree includes items with long text. I do not want a line/word break, but horicontal scroll bars.
A custom style (named small-tree-subj) is used by the tree. According to the documentation scroll bars appear only when columns are included.
These columns must have a width or hflex value. I want no columns, so the label value is empty. Unfortunately, the tree is not displayed correctly.
If i add another entry, the tree is showing correctly. What goes on here?
hflex="1" or hflex="max" for treecols give worse results.
Kai
<zk>
<style>
.small-tree-subj .z-treecell-cnt {
white-space: nowrap;
overflow: hidden;
height: 14px;
font-size: 0.85em;
}
</style>
<window width="320px" height="400px">
<hlayout width="100%">
<vlayout hflex="1">
<button label="add item">
<attribute name="onClick"><![CDATA[
tree.getTreechildren().appendChild(new Treeitem("Item4 with very very long long text foo foo foo"));
]]></attribute>
</button>
</vlayout>
<tree id="tree" hflex="2" height="100%" rows="8" sclass="small-tree-subj">
<treecols sizable="true">
<treecol label="" hflex="min"/>
</treecols>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 1" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 2.1" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 2.1.1" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2.1.2" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2.2" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 2.2.1 with very long text ABCD" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</treeitem>
<treeitem label="Item 3" />
</treechildren>
</tree>
</hlayout>
</window>
</zk>
Hi,
When you set hflex="min" in treecol, zk will calculate the column width after rendering all tree items, therefore, the horizontal scrollbar is showed correctily.
On the other word, when set hflex="1" in treecol, it will define the width according to parent component width without considering content of tree items.
When you add another entry, it will recalculate the width again, so the tree is showing correctly.
BTW, there is no hflex="max".
Thank you for your explanation. I thought, there is also a parameter hflex="max".
How can I achieve it now that the tree is displayed correctly from the beginning.
After rendering in browser I see no entries.
Kai
Hi Kai,
I have tried your sample code and it displayed correctly from the beginning with Firefox and IE9.
Would you provide the screenshot and environment information?
Hello vincentjian,
I use firefox 10 and ie9 on windows 7. The pictures show output with zk sandbox.
As you can see, i see nothing. The second picture shows the output after clicking on the button.
I have upload pictures in net. You can download the pictures via this link http://www.woofiles.com/dls-106479-CCqxfVza.html
Kai
Hi Kai,
Please try remove the 'treecols' and add the style below:
.z-tree-body table {
table-layout: auto !important;
}
Regards,
ben
neata :)
nice ideas, unfortunately no solution for the following case:
consider a tree (dynamically rendered with the filesystem). this means, the depth of the tree is quite.. large :)
<div style="width: 300px; height: 640px">
<tree style="width: 300px; height: 640px" />
</div>
and the corresponding css
div.z-tree {
overflow: auto;
}
div.z-tree-body table {
table-layout: auto !important;
}
div.z-treecell-cnt {
white-space: nowrap;
}
in this case, the horizontal scrollbar appears but does not expand its width when a new level of the tree is opened. at some point, being 4 or 5 levels deep, you can't see the labels of the treeitems. the scrollbar should allow you to scroll to the right as the width of the treeitems grows.
any ideas are welcome :)
thank you
Hi,
I tried a similar case on ZK Fiddle and it works fine,
http://zkfiddle.org/sample/3h03i67/1-Tree-no-wrap-with-long-text
Regards,
Ben
Asked: 2012-02-22 15:03:37 +0800
Seen: 421 times
Last updated: Jun 21 '12