Bar

The Bar component removes all the space between its children
so that they bump right up against eachother.

Without the Bar class

Button Button Button

With the Bar class

Button Button Button


It also forces the whole block to behave as a solid block that cannot break or wrap.

A Button A Button A Button A Button A Button

To force breaks you may use a <BR> tag.

Button Button Button
BR tags work as expected Button Button

Vertically align the buttons

To vertically align the buttons in a Bar simply add a valign attribute.

e.g. <p class=Bar valign=bottom> or <p class=Bar valign=top>

A Button A Button  valign=bottom

A Button A Button  valign not set

A Button A Button  valign=top


Font Size

The font-size for the contents of a Bar is hard-coded at 11px.

Custom CSS

To override this setting, add the following to your app's custom css file:

.MyApp .Bar > * {
	font-size:22px;
}

Note: replace MyApp with the class of your actual app.

Subclass Bar

Alternatively you can subclass Bar itself.

CSS: Create your subclass.

.Bar.MyCustomBar3 > * {
	font-size:22px;
}

HTML: Add your new class to a Bar element.

<p class="Bar MyCustomBar3">…