CODEWITHSUNDEEP
firefoxtabsfirefox-addonxul
Gadelkareem
Gadelkareem

Reputation: 1097

XUL tabbox tabs scrolling

The same question has been asked in the Mozillazine forums earlier. Borrowing his description:

I'm developing an extension for Firefox and have a great problem. I've got lots of tabs in my extension and in case of small size windows some of the tabs are not visible. That's why I want to put scrollbars and I can't succeed.

Here is my code 

<tabbox flex="1">
<tabs>
<arrowscrollbox allowevents="true" flex="1" class="tabbrowser-arrowscrollbox" orient="horizontal">
<tab id="tab_1" label="Tab 1"/>
<tab id="tab_2" label="Tab 2"/>
...
<tab id="tab_9" label="Tab 9"/>
</arrowscrollbox>
</tabs>
<tabpanels flex="1">
<tabpanel flex="1" orient="vertical" >Tab 1 content</tabpanel>  
<tabpanel flex="1" orient="vertical" >Tab 2 content</tabpanel>  
...
<tabpanel flex="1" orient="vertical" >Tab 9 content</tabpanel>  
</tabpanels>
</tabbox>

In this case scrolling does work on tabs but clicking on the tab does nothing, thus the correspondent tab content is not displayed. If I remove the arrowscrollbox element from the tabs element, I get no scroll and some of tabs are not visible.

So can anyone suggest me a way when I will have both scrolling and properly working tabs?

Upvotes: 2

Views: 686

Answers (1)

Wladimir Palant
Wladimir Palant

Reputation: 57651

The <tab> tags have to be direct clildren of the <tabs> tag, otherwise it won't work. The <tabs> tag doesn't have to be a direct child of the <tabbox> tag however so you can put the <arrowscrollbox> tag in between. This way it works:

<tabbox flex="1">
  <arrowscrollbox allowevents="true" class="tabbrowser-arrowscrollbox" orient="horizontal">
    <tabs>
      <tab id="tab_1" label="Tab 1"/>
      <tab id="tab_2" label="Tab 2"/>
      ...
      <tab id="tab_9" label="Tab 9"/>
    </tabs>
  </arrowscrollbox>
  <tabpanels flex="1">
    <tabpanel flex="1" orient="vertical" >Tab 1 content</tabpanel>
    <tabpanel flex="1" orient="vertical" >Tab 2 content</tabpanel>
    ...
    <tabpanel flex="1" orient="vertical" >Tab 9 content</tabpanel>
  </tabpanels>
</tabbox>

Upvotes: 4

Related Questions