Does anyone know how I can make a TabBox to fill all the space? I tried this:
<tabbox id="MyTabBox" flex="1">
<tabs>
<tab label="Income" />
<tab label="Taxes" />
</tabs>
<tabpanels flex="1">
<tabpanel>
<button label="Calculate" flex="0"/>
</tabpanel>
<tabpanel>
</tabpanel>
</tabpanels>
</tabbox>
The TabBox looks great, but it causes the Button to fill the entire height of the first TabPanel, despite its flex attribute. If I limit the height of the button, this also makes the TabBox type short, and not what I need.
Thank.
Update: now the window code looks like this:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/" ?>
<?xml-stylesheet type="text/css" href="chrome://MyExtension/skin/MyExtension.css" ?>
<!DOCTYPE window SYSTEM "chrome://MyExtension/locale/translations.dtd">
<window id="MyExtension-MainWindow"
title="My Extension"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<html:link rel="icon" href="chrome://MyExtension/skin/MyExtensionFavIcon.png"/>
<tabbox id="MyTabBox" flex="1">
<tabs>
<tab label="Income" />
<tab label="Taxes" />
</tabs>
<tabpanels flex="1">
<tabpanel align="start">
<button label="Calculate" flex="0"/>
</tabpanel>
<tabpanel>
</tabpanel>
</tabpanels>
</tabbox>
</window>
FavIcon OK, OK button, TabBox shortened, which sucks: - (
source
share