Layout

Panorama's layout system is a simplified version of HTML layout. It does not support all of the features of HTML layout, but it makes most layouts simple to implement.

Flow Layouts

The most common case for Panorama layouts is to place multiple Panels in a row or column. This is generally done using the flow-children property.

This simple example will flow 3 labels from top to bottom within a Panel:

<Panel class="SimpleExample">
  <Label text="Label 1" />
  <Label text="Label 2" />
  <Label text="Label 3" />  
</Panel>

.SimpleExample
{
  flow-children: down;
}

To flow horizontally instead, simply set "flow-children: right;".

Wrapping

If you'd like your panels to start on a new line when they run out of room on the current one, this can be done using "right-wrap" or "down-wrap".

/* Flows right and wraps to the next row when it runs out of space */
.SimpleExample
{
  flow-children: right-wrap;
}

/* Flows down and wraps to the next column when it runs out of space */
.SimpleExample
{
  flow-children: down-wrap;
}

Direct Positioning

In some cases, you might want more control than a flow layout provides. Or you might want overlapping contents. In those cases, simply leave flow-children as "none" (which is the default). Then you can position each panel independently.

When positioning panels directly, it's often easiest to use horizontal-align, vertical-align, and margin to achieve what you want.

<Panel class="Container">
  <Panel class="Background" />
  <Panel class="TopLeftWidgets" />
  <Panel class="BottomRightWidgets" />
</Panel>

.Container
{
  /* No flow-children required */
  width: 1000px;
  height: 1000px;
}

.Background
{
  width: 100%;
  height: 100%;
}

.TopLeftWidgets
{
  horizontal-align: left;
  vertical-align: top;
  width: 50%;
  height: 50%;
  margin-top: 20px;
  margin-left: 20px;
}

.BottomRightWidgets
{
  horizontal-align: right;
  vertical-align: bottom;
  width: 50%;
  height: 50%;
  margin-right: 20px;
  margin-bottom: 20px;
}

For even more control, you can directly set the position of a Panel using the x, y, z, or position attributes.

<Panel class="Container">
  <Panel class="SomeWidget" />
</Panel>

.Container
{
  /* No flow-children required */
  width: 1000px;
  height: 1000px;
}
.SomeWidget
{
  x: 50px;
  y: 500px;
}

The transform property will also apply on top of any positions that are set.

Box Model

Panels generally follow the standard CSS box model. These standard CSS properties can be used to adjust a Panel's size and position:

width,min-width, max-width

height,min-height, max-height

border

margin

padding