How can I make even-width columns? - firefox

Question

I am very perplexed with the XUL's 'Box Model' layout.
I want to make a table-like layout of elements.
The layout should consist of one row and three columns.
The columns should have the same width and occupy the whole width of the page.
I will put different elements inside the columns, but the width of the columns should remain the same
and the elements should have their normal sizes, not stretched out.
Say, first column is empty, second contains an image, third contains a button.
How can I achieve that?
I tried boxes and grids, but the columns just seem to assume arbitrary width.
Thank you.
This does not work:
<grid>
<columns flex="1">
<column/>
<column/>
<column/>
</columns>
<rows>
<row>
<spacer flex="1"/>
<image src="MyImage.png"/>
<button id="MyButton" label="MyButton"/>
</row>
</rows>
</grid>

Answer 1

Specify the min and max width of each column and make each cell in the grid an hbox width specific widths and heights. Something like this:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:h="http://www.w3.org/1999/xhtml">
<grid>
<columns flex="1">
<column maxwidth="100" minwidth="100"/>
<column maxwidth="100" minwidth="100"/>
<column maxwidth="100" minwidth="100"/>
</columns>
<rows>
<row>
<hbox maxwidth="100">
xxxx xxxxxxxx xxxx xxxxx xxxxxxxx xxxxxxxx
</hbox>
<hbox maxwidth="100" minwidth="100" maxheight="10">
<button id="MyButton1" label="MyButton1"/>
</hbox>
<hbox maxwidth="100" minwidth="100" maxheight="30">
<button id="MyButton1" label="MyButton2"/>
</hbox>
<hbox maxwidth="100" minwidth="100" maxheight="40">
<button id="MyButton3" label="MyButton3"/>
</hbox>
</row>
</rows>
</grid>
</window>
In Xul, the width and length attributes are always in pixels. You cannot specify a percentage like you can with css. This means you will have to know your page width in advance and specify widths accordingly if you want the columns to be evenly spaced and extend to the page width.
Here's another way. Use this:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:h="http://www.w3.org/1999/xhtml">
<grid>
<columns>
<column flex="1"/>
<column flex="1"/>
<column flex="1"/>
</columns>
<rows>
<row>
<button label="MyButton1"/>
<button label="MyButton2"/>
<button label="MyButton3"/>
</row>
</rows>
</grid>
</window>
to create this:
The buttons/columns will adjust as the window size is changed.

Answer 2

I suggest to use in combo with flex="1" on the column elements
<columns equalsize="always">
<column flex="1">
...
a/p documentation
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/equalsize
you can also use equalsize="always" on the rows as well, this is how it is accomplished in the Thunderbird Lightning calendar layout