ToolBarButton Label Positioning

Talk about add-ons and extension development.
Posts: 4
Joined: June 29th, 2004, 8:22 pm

Post Posted February 16th, 2005, 7:29 pm

Does anyone know how to get a ToolBarButton's label underneath or to the left of the button instead of to the right of the button?

Posts: 1974
Joined: November 5th, 2002, 3:25 am
Location: Lancaster, UK

Post Posted February 17th, 2005, 3:51 am

To get the label below the icon use either the <code>orient</code> attribute in XUL, or the <code>-moz-box-orient</code> CSS property (set to <code>vertical</code>). CSS can't override the attribute, so if you want themes to be able to change the orientation then use CSS to set it.

To get the text to the left of the icon use <code>-moz-box-direction: reverse</code> in CSS (presumably <code>direction="reverse"</code> in XUL would work too, though I've never tried). Combine with the above to get the text above the icon.

If your toolbar button has <code>type="menu"</code> or <code>type="menubutton"</code> then things get more complicated.

Posts: 4019
Joined: November 16th, 2003, 3:05 am
Location: Russia, Moscow

Post Posted February 17th, 2005, 12:15 pm

And I think this is recommended: put class="toolbarbutton-1" in your toolbarbutton and it will set -moz-box-orient to vertical by default (making the label be underneath the icon).


User avatar
Posts: 1747
Joined: June 16th, 2004, 6:09 am
Location: Christchurch, New Zealand

Post Posted June 17th, 2005, 4:04 am

This works quite well. But afterwards it is no longer centered vertically like it is was before. This is noticable on many third party themes that use bigger icons compared to what the default theme uses. I thought "-moz-box-pack" should fix it but it doesn't seem to work, any other ideas?

Return to Extension Development

Who is online

Users browsing this forum: delicacy1 and 0 guests