Home/ Questions/Q 8191211
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T03:52:08+00:00

I have this tree structure in my xul application. <tree> <treechildren> <treeitem> <treerow> /*

  • 0

I have this tree structure in my xul application.

<tree>
    <treechildren>
        <treeitem>
            <treerow> 
                 /* some code */
            </treerow>
            <treechildren>
                <treeitem> /* some code */</treeitem>
                <treeitem> /* some code */</treeitem>
            </treechildren>
         </treeitem>
     </treechildren>
</tree>

As you xul gurus already know, treeitem that contains treechildren gets an arrow left from the label. Like this:

enter image description here

What I want to know is how to change this arrow and position it on far right.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This arrow is called a “twisty” and it is styled using the -moz-tree-twisty pseudo-class. The default Windows theme defines the following styles for the tree twisty:

    treechildren::-moz-tree-twisty {
  -moz-padding-end: 4px;
  padding-top: 1px;
  width: 9px; /* The image's width is 9 pixels */
  list-style-image: url("chrome://global/skin/tree/twisty-clsd.png");
}

treechildren::-moz-tree-twisty(open) {
  width: 9px; /* The image's width is 9 pixels */
  list-style-image: url("chrome://global/skin/tree/twisty-open.png");
}

    By overriding these styles you change its width and margins, you can also use other images. However, I don’t think that you can go as far as to move it to a different position.

    • 0