ui:flexible-box

Purpose

Allows UI elements such as text input fields to expand or contract depending upon the width of the device.

Refer to Flexible Box for further information.

Styles

The ui:flexible-box element supports all the usual style properties that apply to block elements.

The direct children of the ui:flexible-box element should have the mcs-box-flex property set. This property specifies the relative flexibility of the selected element. It allows floating point values. The value of '0' means that the element is inflexible, i.e. its width will not change. Values other than '0' indicate that the element can shrink or grow depending on the available space. For example, an element with the mcs-box-flex property set to '2' is twice as flexible as an element with the mcs-box-flex property set to '1'. Negative values are not allowed.

The mcs-box-orient property specifies whether a box should lay out its children horizontally or vertically. The default value of 'horizontal' means that the box should display its children in a horizontal line. The value of 'vertical' means that the box should display its children vertically.

The mcs-box-align property specifies how the children of the ui:flexible-box element are placed and aligned along the direction perpendicular to the orientation of the box, and where the extra space, if any, should be positioned. The possible values are: 'start', 'end', 'center', 'baseline' and 'stretch'. The default value of 'stretch' means that the height of each child should be adjusted to the height of the containing block. 'start' means that the edge of each child should be placed along the edge of the containing box and any extra space should be placed after the element. 'end' means that the edge of each child should be placed along the edge of the box, and any extra space should be placed before the element. The value of 'center' indicates that any extra space should be divided evenly, with half placed before the child and the other half placed after the child. The value of 'baseline' has two meanings. If the box orientation is horizontal, all children will be placed with their baselines aligned, and extra space placed before or after as necessary. If the box orientation is vertical, then 'baseline' is treated in the same way as 'center'.

Support for the mcs-box-align, mcs-box-flex and mcs-box-orient style properties and the 'mcs-box' keyword for the display property is represented by the following feature:

If any of the properties or keywords listed previously are not supported by the targeted device, then the feature is not supported.

Attribute groups

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui"
  xmlns:xforms="http://www.w3.org/2002/xforms">
  <head>
    <title>Flexible box demo</title>
  </head>
  <body>
    <ui:flexible-box style="width: 100%;">
      <xforms:model id="search">
        <xforms:submission id="search-submit" action="search.xdime"/>
      </xforms:model>
      <xforms:input style="mcs-box-flex: 2" model="search" ref="query">
        <xforms:label/>
      </xforms:input>
      <xforms:submit style="mcs-box-flex: 1" model="search" submission="search-submit">
        <xforms:label>Go</xforms:label>
      </xforms:submit>
    </ui:flexible-box>
    <ui:flexible-box style="width: 50%;">
      <div style="background:blue; mcs-box-flex: 1;">1</div>
      <div style="background:red; mcs-box-flex: 2;">2</div>
      <div style="background:green; mcs-box-flex: 3;">3</div> 
    </ui:flexible-box>
  </body>
</html>

Related topics