[CSS workaround available] Triangle for opening a folder is too small

[gitFrank]

Hello, I have many folders with subfolders. The triangles to open are very small. I wonder if it is possible to use the whole space left of the triangle (including the triangle) to open a folder. Or is there an add-on?

[Aris-t2]

Please post a screenshot of the "triangle" and "space" you are referring to.

[gitFrank]

hope you can understand. :-)

[Aris-t2]

You have a few options to change triangles (aka twistys) space. Add these code snippets to custom CSS area.

This will remove the "space" before twisty:

treechildren::-moz-tree-indentation {
  width: 0px !important;
}

This will increase twistys left and right padding:

treechildren::-moz-tree-twisty {
  padding-inline-end: 10px !important;
  padding-inline-start: 10px !important;
}

This will increase twistys width:

treechildren::-moz-tree-twisty {
  width: 16px !important;
}

[gitFrank]

Hi, increase padding-inline-start|end helps me a lot. Thank you for that. thumb up Ideally -moz-tree-twisty would take all the left space. I don't know the structure and classes to be able to play further with CSS. But for now i can good work/live with your solution. :-)

[Aris-t2]

Good to hear.

You can at least try to modify the other values to see, if the result fits more your needs. The only way to reduce the space before the twistys was the treechildren::-moz-tree-indentation code.

Nur mit dem treechildren::-moz-tree-indentation Code wird das Einrücken der Elemente verhindert. Leider sind dann alle Unterordner auf der gleichen Höhe.

[gitFrank]

Reduce the space was not the intention. Make the space cklickable to expand the folder was my goal. Because the triangles are so small that I often don't hit them. Then the focus jumps to this folder, but I just wanted to expand it.

Danke für deine Mühe. :-)

[Aris-t2]

Understood ;-)

In my tests an additional background color or border also improved the appearance and functionality of the visible space:

treechildren::-moz-tree-twisty {
  padding-inline-end: 10px !important;
  padding-inline-start: 10px !important;
  border-radius: 12px !important;
  border: 1px solid lightgrey !important;
}
treechildren::-moz-tree-indentation {
  width: 4px !important;
}

treechildren::-moz-tree-twisty {
  padding-inline-end: 10px !important;
  padding-inline-start: 10px !important;
  border-radius: 12px !important;
  background: lightgrey !important;
}

treechildren::-moz-tree-indentation {
  width: 4px !important;
}

[gitFrank]

Yeah, i think with padding and border (without background) my life will be easier. Problem solved. THANK you! Thanks for your great Add-on.

[JYLD]

I have my folder tree background set to a dark dark gray. The twisty arrow basically couldn't be seen as a result. Aris' code for the solution above proved very helpful to me. Thank you. I modified Aris' code as follows to make it work for my needs.

treechildren::-moz-tree-twisty {
    padding-inline-end: 5px !important;
    padding-inline-start: 5px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    margin-right: 8px !important;
    margin-left: 4px !important;
    border-top: 1px solid #FFFFFF !important;
    border-left: 1px solid #FFFFFF !important;
    border-right: 1px solid #000000 !important;
    border-bottom: 1px solid #000000 !important;
    border-radius: 3px 3px 3px 3px !important;
    background: #CDD7DD !important;
}