javazkzul

How to place open/close icon of zk tree elements to the right side from tree element?


I'm wondering, is it possible to place open/close element on right side from tree cell as I showed on the screenshot below?

enter image description here


Solution

  • A non invasive way is a CSS based approach using display:flex and define an order for the icon and some margin-left adjustments:

    <zk>
      <style>
        .z-treecell:first-child .z-treecell-content {
          display: flex;
        }
        .z-treecell:first-child .z-tree-icon {
          order: 1; /*order it to the right*/
        }
        .z-treecell:first-child .z-tree-icon+.z-treecell-text {
          margin-left: 24px; /*this value might need adjustment based on the theme*/
        }
      </style>
      <tree>
        <treechildren>
          <treeitem label="item 1"/>
          <treeitem label="item 2">
            <treechildren>
              <treeitem label="item 2.1">
                <treechildren>
                  <treeitem label="item 2.1.1"/>
                </treechildren>
              </treeitem>
            </treechildren>
          </treeitem>
        </treechildren>
      </tree>
    </zk>
    

    Here a running example on zkfiddle compatible with zk 7.0.0+ optimized for 8.5.2.1 with iceblue theme.