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

Automatic Scaling & Aspect Ratios

Panorama will automatically adjust the size and position of Panels to account for different screen resolutions. Panels should generally be authored expecting a 1920x1080 resolution; at that size, no extra scaling is done. It is expected and often preferred to use raw pixel values such as width: 100px;, because at other resolutions that will scale up or down accordingly.

The exact formula for the scaling is based on the ratio of the current vertical resolution compared to 1080 pixels. So, for example, if Dota is running at 2560x1600, then a scale factor of 1600 / 1080 = 1.48 is applied to all panorama elements.

In certain aspect ratios, some panels might benefit from a different layout arrangement to fit better. This happens most frequently with the 4:3 aspect ratio, which is quite a bit narrower than the more common 16:9 or 16:10. To support custom styling at these aspect ratios, Panorama automatically applies the current aspect ratio as a class on the root panel. This makes it easy to author different CSS properties for different sizes. For example:

.SomeWidePanel
{
    width: 1600px;
}

.AspectRatio4x3 .SomeWidePanel
{
    /* In 4:3, make this panel a bit less wide */
    width: 1200px;
}