1

how to modify height of tree rows

asked 2014-06-11 20:11:30 +0800

robertkaren gravatar image robertkaren
77 7

updated 2014-06-11 20:27:34 +0800

What is correct way to modify height of a tree's rows? I am getting complaint that there is too much padding above and below the text. I can't find this anywhere in the documentation. Thanks for any help!

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted
3

answered 2014-06-12 06:55:27 +0800

chillworld gravatar image chillworld flag of Belgium
5357 4 9
https://github.com/chillw...

updated 2014-06-12 06:56:00 +0800

mhj is correct,

You can investigate it also by yourself.
Trick :

  • IE press F12.
  • FF with firebug or also press F12.

Then you can select an inspect element and select the item you want to investigate.

example of the "post a comment" link :

<a class="button" id="add-comment-to-post-93170">

Now in the <style> </style> you can alter the css for that.

example :

<style>
    a.button {
        font-size:20px;
        padding:0px;
    }
</style>

You don't have to restart your dev server, just refresh your browser and you will see the changes you have done in your zul.

Greetz chill.

link publish delete flag offensive edit
2

answered 2014-06-11 23:56:29 +0800

mhj gravatar image mhj flag of Brazil
806 1 7

Hello! looking for style guide i found css treecol defs. and div.z-tree-header th.z-treecol it has padding: 2px; maybe that helps you. btw: link for download style guide: link

link publish delete flag offensive edit
0

answered 2014-06-17 17:20:43 +0800

robertkaren gravatar image robertkaren
77 7

Thanks for answering. I am able to change all rows of trees with code like below, but is there a way to do it for this tree only. when I used style="line-height:20px;" in the tree properties, it had no effect?

<style>
    .z-treecell-content {
                  line-height: 20px;
}
</style>
<tree id="codebookCategoriesTree" 
                    width="100%" vflex="1">
    <treecols sizable="true">
                    <treecol width="100%"/>
                    </treecols>
                    <treechildren>
                     <treeitem><treerow><treecell label="111"></treecell></treerow></treeitem>
                     <treeitem><treerow><treecell label="111"></treecell></treerow></treeitem>
                     <treeitem><treerow><treecell label="111"></treecell></treerow></treeitem>              <treeitem><treerow><treecell label="111"></treecell></treerow></treeitem>
                      <treeitem><treerow><treecell label="111"></treecell></treerow></treeitem>
                      <treeitem><treerow><treecell label="111"></treecell></treerow></treeitem>
                      <treeitem><treerow><treecell label="111"></treecell></treerow></treeitem>
                      <treeitem><treerow><treecell label="111"></treecell></treerow></treeitem>
                      </treechildren>
</tree>
link publish delete flag offensive edit

Comments

put a custom css class in the style tag. add sclass="css class name". this is in addition to the zclass then.

chillworld ( 2014-06-17 17:50:31 +0800 )edit

thanks. it isn't picking it up. can you tell me error: <style> .codebookCatTree { line-height: 20px; } </style> <tree id="codebookCategoriesTree" sclass="codebookCatTree" zclass="codebookCatTree" ...

robertkaren ( 2014-06-17 20:00:17 +0800 )edit

also, if I set zclass, won't I lose zk's tree style settings. I just want to change the line-height.

robertkaren ( 2014-06-17 20:05:01 +0800 )edit

oh sorry, mixed up the sclass and zclass (one is take only that css class and other is extending)

chillworld ( 2014-06-17 20:14:09 +0800 )edit
Your answer
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
1 follower

RSS

Stats

Asked: 2014-06-11 20:11:30 +0800

Seen: 29 times

Last updated: Jun 17 '14

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