XUL Tutorial - Window Element Positioning

So far, we know how to position elements either horizontally or vertically inside a box. We will often need more control over the position and size of elements within the box. For this, we first need to look at some additional details of boxes.

Let's say you have two buttons inside a horizontally oriented box. The horizontal size of the buttons is determined by the content of the buttons. Longer labels will result in wider buttons. The vertical size of elements inside a horizontal box are not determined this way however. The buttons will be given heights which fit the full size of the box. Try the following example:

Each button will have a width that just fits the text. However, if you change the size of the window, you will notice that the height of the buttons grows. Horizontal boxes make their children stretchy vertically. Notice in the image how the horizontal size always just fits the text of the buttons but the vertical size changes as the window does.

Vertically oriented boxes do this as well, but in the opposite direction. The vertical size is determined by the element.

There will be times when you do not want this behaviour. The attribute autostretch of the box controls this. By setting this to a value of never, a horizontal box will not stretch its children vertically. The opposite of this, always is the default and causes stretching. The example below shows this in use:

The buttons in the first box will stretch vertically whereas the buttons in the second box will not. Note in the image that the first two buttons have stretched but the other two have not. Since the second box is not stetchy, the elements inside it will have a height that is the most appropriate for the element. For the two buttons here, the best height is one that just fits the text.

The four buttons have aligned themselves along their top edges. You might wish the last two buttons to be shown centered with respect to the other two or shown along the bottom edge. We can do this by using the valign attribute. It works much the same as the similarly named attribute of HTML. It controls the vertical alignment of elements with-in the box.

It wouldn't make sense to use the valign attribute on the first box, because it stretches its elements. The stretchy elements always take up all the space so they cannot really be centered.

You can also use the CSS property vertical-align instead of placing a valign attribute of a box. It allows the same values.

For vertically oriented boxes, you can use the align attribute. It works similarly to the valign attribute but for horizontal alignment. Possible values are left (the default), center and right. Or, you can use the CSS property text-align which accepts the same values.

The autostretching feature of boxes is like having a child element with a flex. The advantage of the align and valign attributes are that they will usually result in less nested boxes. For most layouts, where elements only need to be aligned along their top or bottom edges, or centered, they will suffice. There will be times when flex will be needed.

Specifying the Sizes of Elements

You may need to have more control over the size of an element in a window. There are a number of features that allow you to control the size of an element. The quick way is to simply add the width and height attributes on an element, much like you might do on an HTML img tag. An example is shown below:

However, it is not recommended that you do this. It is not very portable or very useful. A better way is to use style properties, which work similarly to style sheets in HTML.

The specific width and height is useful for non-flexible elements to indicate their size. The other properties are useful for flexible elements such as those in boxes. By setting a maximum height, for example, a stretchy button will only grow to a certain maximum size. You will still be able to resize the window but the button will stop growing in size.

You can set a width and height on an element to specify an exact size. The size of these style properties and the others should be specified as a number followed by a unit, as in the following examples:

Example 1: the first button will be displayed with a width of 100 pixels (px means pixels). You need to add the unit or the width will be ignored.
Example 2: the second button will be displayed with a height of ten pixels and a width of 100 ems (an em is the width of the letter m in the current font).
Example 3: the third button is flexible so it will grow based on the window size (or the size of the box the button is in). However, the button will never shrink to be less than 50 pixels. Other flexible components such as springs will absorb the remaining space, breaking the flex ratio.
Example 4: the fourth button is flexible and will never have a height that is smaller than 2 ex (an ex is the height of the letter x in the current font) or larger than 100 pixels.
Example 5: the text input is flexible but will never grow to be larger than 10 ems. You will often want to use ems when specifying sizes with text in them. This unit is useful for text fields so that the font can change and the text field would always be a suitable size, even if the font is very large.
Example 6: the html element is constrained to have a maximum width of 50 pixels. The text inside will wrap to the next line.

Let's add some of these styles to the find files dialog. We'll make it so that the two buttons are both the same size and make the text input so that it will resize to fit the entire window.

    <textfield id="find-text" flex="1" style="min-width: 15em;"/>
  </box>
    
  <box orient="horizontal">
    <spring flex="1"/>

    <button id="find-button" class="dialog" value="Find" default="true"
      style="width: 8ex"/>
    <button id="cancel-button" class="dialog"
      value="Cancel" style="width: 8ex"/>

Here, the text input has been made flexible. This way, it will grow if the user changes the size of the dialog. This is useful if the user wants to enter a long string of text. Also, a minimum width of 15 ems has been set so that the text box will always show at least 15 characters. If the user resizes the dialog to be very small, the text input will not shrink past 15 ems. It will be drawn as if it extends past the edge of the window. Notice in the image below that the text input has grown to extend to the full size of the window.

The buttons have been set to a width of 8 ex. Notice that in the image below, both buttons have the same width (or they would do if it wasn't for the image on one of them.) The align attribute has been added to the Find button so that the image appears to the left of the text. The buttons are not flexible, so the minimum and maximum sizes are not necessary.

[Image of find files with sizeable text input]

Cropping Text and Buttons

You could potentially create a button element that has a maximum size that is larger than the text inside it. Of course, a solution would be to increase the size of the button. However, buttons (and text elements) have a special attribute called crop that allows you to specify how the text may be cropped if it is too big.

If the text is cropped, an ellipsis (...) will appear on the button where the text was taken out. Four possible values are valid:

This attribute is really only useful when a dialog has been designed to be useful at any size. The following shows this attribute in use:

Notice how the text on the button has had the right side of it cropped after the window is made smaller.

The crop attribute can also be used with the text element and other elements that use the value attribute for labels.

(Next) Next, a summary and some additional details of the box model are described.