From MozillaWiki
Jump to: navigation, search

The goal is to draw a calendar view in xul, using boxes, in XUL.

The events and the empty spaces would all be boxes, like in the following example:

|       |
|       |
|   |   |
| A |---|
|   |   |
|---| B |
|   |   |
|       |

The image shows an example of how the boxes could be laid out. Event A and the empty space blow it would be two seperate boxes, and be childs of a vbox. The same for event B and the space above it. Those two vboxes would be in a hbox, and forming columns that way. In order to make those columns all the same width, equalsize=always can be used.

The second example is more problematic:

|           |      vbox (complete day)
|           |        box (empty space)
|-----------|        hbox
|   |   |   |          box (C)
|   | D | E |          vbox
| C |---+---|            hbox
|   |       |              box (D)
|   |   F   |              box (E)
|   |       |            box (F)
|-----------|        box (empty)
|           |

Here, you can't create three columns, because event F can't span multiple columns. You could try to put event D and E in a hbox, and then that hbox in a vbox, together with event F. Then that vbox would be in a hbox together with event C. (see the tree-like diagram.) But now, if you use equalsize=always, event C would be 50% of the width, not 33%

Using flex to assing the widths will also fail, as flex divides empty spaces, so a box with a large label will get more space than a box with short label. And xul doesn't have percentage-based layout either.