Content Comparison

...

The effects of this are not too bad: using the per-component classes (see below) you can more easily address styling of html tags used in the components and reset them only where needed. In addition DomUI mostly uses the styleless div and span tags, and just adds styling by giving those a class where needed.

The box model used is border-box.

The default (original) box model used by browsers leaves a lot to be desired. When you specify something like:

height: 100px;
width: 200px;
padding: 10px;
border: 2px solid black;

the actual width of the element is padding + border + width. The same applies to height: padding + border + height. This makes defining the actual size of element very hard because adding a border means decreasing the size if the element's size needs to be constant. It also causes huge problems with things like "width: 100%" because those cannot have border nor padding: it would make the element exceed the 100% width causing those annoying scroll bars.

There is a better box model that is currently well supported by all major browsers (and IE up to version 8): the border-box model. This model uses the defined width and height of an element as the actual rendered size, and subtracts from that size the sizes of borders and padding to get the content area's size. In effect this means that the above definition would always result in an element of exactly 200x100 pixels wide. The content area (inside the element) would be exactly 176x76 pixels big: 200 - 2*2 - 2*2 for width and the similar calculation for height.

The script used for this is in _core.scss, and applies the following:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

This sets all tags to use border-box sizing by default, and makes it inherit so that changes made locally (should) percolate through.

See the following links for more information:

• Box sizing layout secrets

Browser support and tweaks

...

In those times of yore we had browsers and Internet Explorer. The latter was, well, evil. Supporting IE versions below 8 was , well, what Hell probably looks like. Luckily a lot has changed: while IE is still a royal pain in the backside (you won't believe the trouble it has with the simplest stuff still) its rendering, at least, has become way better.

...

A vertical form is built using a table. The table has class ui-f4 and ui-f4-v, the latter indicates that the form is a vertical form.

Each row is a single label/control pair (unless the format is manually altered).

In most cases the label is some kind of text, and the control contains something like an input, select or display text. To look correct it is of big importance that the baselines of the labels and the texts inside the controls match up, like this:

Image Removed

As can be seen the baseline extends through the table cells, and properly aligns the texts from the label and the LookupInput component that is the control (the icons do not align; this is a bug).

To control the baseline we need to style both the label and the parts that can appear as a control. This is non trivial, so here follows an explanation of how it is done, with each row containing one cell for the label and one for the control. The details can be found here.