Container Elements: box

box specifies a box container.

The box container follows a “box” layout, in which objects are positioned in a single row either horizontally or vertically.

The position of an object in a box is determined by various factors, such as the sizes and positions of other objects in the same box, the amount of gap between the objects, the alignment of the objects, and so on. These settings may be controlled using the attributes direction, horizontalAlign, verticalAlign, horizontalGap, and verticalGap.

Attributes

name Description  
direction Specifies the orientation of the box. Objects in a box may be laid out horizontally or vertically; correspondingly, the value of this attribute can be set to horizontal or vertical (default).
horizontalAlign Specifies the horizontal alignment of the contents of the box. The contents of a box may be aligned horizontally to the left, the right, or the center; correspondingly, the value of this attribute can be set to left (default), right, or center.
verticalAlign Specifies the vertical alignment of the contents of the box. The contents of a box may be aligned vertically to the top, the bottom, or the middle; correspondingly, the value of this attribute can be set to top (default), bottom, or middle.
horizonalGap Specifies the amount of space between consecutive objects within a horizontal box.  
verticalGap Specifies the amount of space between consecutive objects within a vertical box.  

Example

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" backgroundColor="#111111">
 
 <skin source="skins.swf"/>
 
 <box direction="horizontal" horizontalAlign="right" horizontalGap="4"
   width="400" backgroundColor="yellow">
  <button action="pagePrevious" upState="#PagePreviousButton_up" ... /> 
  <button action="index" upState="#IndexButton_up" ... /> 
  <button action="pageNext" upState="#PageNextButton_up" ... /> 
 </box>
 
 ...
 
</viewer>

In the example above, the buttons are laid out horizontally one after another, with a gap of 4 px. between them, and aligned to the right of the box.

The box element supports all the common attributes.

Note: The positioning attributes have no effect within a box.

 

Contents