ToolBarButton Label Positioning

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

ToolBarButton Label Positioning

Post by marksb »

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?
Brian
clav
Posts: 1974
Joined: November 5th, 2002, 3:25 am
Location: Lancaster, UK
Contact:

Post by clav »

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.
asqueella
Posts: 4019
Joined: November 16th, 2003, 3:05 am
Location: Russia, Moscow

Post by asqueella »

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
mcm_ham
Posts: 1747
Joined: June 16th, 2004, 6:09 am
Location: Christchurch, New Zealand

Post by mcm_ham »

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?
Post Reply