How to create vertical tabs in firefox addon?

Question

Working on a firefox addon with a dialog box. I wish to create tabboxes with plenty of tabs in it. How can I make the tabs appear vertical like this ? There doesn't seem to be any orient attributes for a tabbox. Does it require some CSS hacking ?

Answer 1

I figured it out myself after 2 hours of painful search. For anyone looking for the answer, here it is :

• The tabbox container by default has a vertical orientation, so if we need to bring our tabs to the left, we need to make the tabbox orientation horizontal first. Although the Mozilla documentation for tabbox doesn't show orient attribute, it actually works. Optionally, you can set the style -moz-box-orient:vertical
• Now change the tabs orientation to vertical.

With both these settings, it should now work. Here is the example xul code :

<tabbox id="myTabList" selectedIndex="2" orient="horizontal">
  <tabs orient="vertical">
    <tab label="A First tab"/>
    <tab label="Second tab"/>
    <tab label="Another tab"/>
    <tab label="Last tab"/>
  </tabs>
  <tabpanels>
    <tabpanel><!-- tabpanel First elements go here --></tabpanel>
    <tabpanel><!-- tabpanel Second elements go here --></tabpanel>
    <tabpanel><button label="Click me"/></tabpanel>
    <tabpanel><!-- tabpanel Fourth elements go here --></tabpanel>
  </tabpanels>
</tabbox>

Although this works, it might result in poor rendering of the tabs as the tab edges are in the default direction. One may have to do some styling to correct that.

Answer 2

you should have one tabbox with multiple tab elements.

do tabbox orient it vertical: https://developer.mozilla.org/en-US/docs/XUL/Attribute/orient

or just use a vbox. for horizontal orientation use hbox.