The layout engine of qooxdoo tries to use all available features of each html engine if it will benefit from them. Continue reading to get a more detailed impression what the ideas behind are.

Compared to older versions of qooxdoo the current version for example uses all edge properties (top, right, bottom, left) if possible. So if you want to define an offset from the right edge you can define the right property of your qooxdoo widget - simply as with CSS. qooxdoo internally then uses the same CSS property here. This seems to be consistent and even logical first, but if you try to implement this, it is much easier to do all these features with the top, left, height and width style properties only and calculate the other parts respectively. The reason for this is, that these four properties are very good supported by all browsers and so you could use the same code for all available browser engines.

Example 1: In modern browsers you are able to define the following in CSS:

.elem{
  position: absolute;
  left: 100px;
  right: 100px;
}

This seems to be a nice feature if you want to create a layout which scales between the two defined edges. But as you might have already noticed this is not supported by our all favorite engine found in all Microsoft Internet Explorers (Windows Platform).

Furthermore qooxdoo allows you to define a min and max width/height for each widget. Again Microsoft’s Internet Explorer miserably fails here and we need to handle this part in qooxdoo differently for this browser.

The following “units” are supported in qooxdoo (## means any valid numeric value):

• pixel (defined as ##):
  This is the default unit in qooxdoo. A simple numeric value which defines the exact pixel size or location of any widget.
• percent (defined as ##%):
  To define percents simple add a “%” symbol to your value. Percents depends on the innerWidth/innerHeight of the parent widget (this is different from HTML, but more logical in my opinion).
• auto (defined as auto):
  The widget gets exactly the size, which is required by the content of the widget.
• flex (defined as ##*):
  Defines with which priority this widget should fill the free space of the parent widget. This does only work for widgets which are directly inside any qx.ui.layout.BoxLayout (or any class which inherits from qx.ui.layout.BoxLayout).

The dimension values width and height supports all four units shown above. All properties in qooxdoo which define the location of the widget (top, right, bottom and left) can only be defined as pixel or as percent values.

The exactly supported properties of each widget can be found in our Layout Managers.