HORIZONTAL ALIGNMENT

Possible horizontal alignments of UI elements are:

• left
• center
• right
• justified.
  
  

  Warning:

  If one box inside the container is defined as horizontally justified, then all boxes of this container having the same vertical alignment will be justified as well.

  The UI elements are always placed from left to right following the order of their declaration into the XML Layout file.

VERTICAL ALIGNMENT

Possible horizontal alignments of UI elements are:

• up
• down
• middle
• distributed.

Example of a non-distributed alignment:

This example shows a container with 4 tiles:

• One tile is vertically aligned on top
• 2 tiles are vertically aligned on middle
• One tile is vertically aligned on bottom

The main container is divided into 3 virtual rows. Each row groups tiles having the same vertical alignment. The height of each row is the height of the highest inner tiles.

Warning:

If one box inside the container is defined as vertically distributed, then all boxes of this container will be distributed as well.

When adding a box inside a row, if the boxes width sum exceeds 100 then a new row is automatically inserted below to display the new box.

CSS attributes (sizes, positions, etc.) associated to the UI element can define at a finer level the positioning of the Tile in its parent <div>

Most of UI components (part of pages, boxes, flyers) can be dimensioned using a set of attributes: widthPercent, heightPercent . These attributes are defined as percentages of the component occupancy with regards to its parent container.

Instead of defining restrictive dimensions, it is possible to use the autoSize attribute which allow the component to expand itself, if needed, depending on its content.

Example of autoSize usage:

All main components of the page have a defined width and height, however the boxes contained in the main part have autoSize attribute set to ‘On’.

The standard user interface for the Catalog (theme catalogDesktop and its associated layout file) has been designed with the autosize attributes set to ‘ON’. It means that the height of each box of the catalog will be adapted automatically by the web browser depending on the content to be displayed (image, text size, number of product to be displayed).

Warning:

Before V10SP1:

The default standard configuration process UI is designed to be used either as a standalone product or embedded in the catalog with autosize attributes set to ‘OFF’ (i.e. the height of each box is given by the height attributes of the XML layout file). It uses the configurator2011 theme

In the catalog2011 standard theme, the height of the box to include the configurator into the catalog is given by the following css class (in catalogPage.css):

#cat #configurator { height: 600px; …. }

From V10SP1:

The default ‘Desktop’ standard configuration process UI is designed with autosize attributes set to ‘OFF’

The default ‘Touch’ standard configuration process UI is designed with autosize attributes set to ‘ON’.

The UI elements are always placed from left to right following the order of their declaration into the XML Layout file.

Example of a standard configurableProductPage: