Layout Widgets

The dxBox widget provides an easy way to arrange the specified markup elements in a row or column.

View Demo

Specify Layout Elements

The widget elements are usually specified using the dxItem markup component, as described in the Specify Layout Elements section of this article. The dxBox items support the following options specifying element size.

• baseSize
  The base height of the row or base width of the column. This field can hold a value of the following types.

  • numeric
    The element size in pixels.

  • string
    A CSS measurement of size (e.g., "55px", "80%", "auto" and "inherit").

  • function
    The function returning the element size.

• ratio
  The row or column size ratio.

For information on the complete set of item options, refer to the Default Item Template reference section of this widget.

Specify Arrange Direction

The widget arranges the elements in a column or in a row depending on the direction option value, which can be 'row' or 'col'.

var boxOptions = {
    direction: 'col'
}

Align Layout Elements

You can also specify the alignment applied to the the elements if they are not stretched to fill the entire widget container. For this purpose, the widget includes the align and crossAlign options, which specify alignment along the specified direction and cross-wise respectively.

The dxResponsiveBox widget enables you to create a site with different layouts for different devices as illustrated by the following image.

View Demo

Screen Factor

The widget selects which layout to use depending on the screen factor. The widget supports the following screen factors by default.

• xs
  The screen width is less than 768 pixels. Used for a small phone screen.

• sm
  The screen width is more than 768 and less than 992 pixels. Used for a small tablet screen.

• md
  The screen width is more than 992 and less than 1200 pixels. Used for a large tablet screen.

• lg
  The screen width is more than 1200 pixels. Used for a large desktop screen.

To specify custom screen factors, use the screenByWidth option of the widget. The function passed to this option takes on the screen width as a parameter and returns a string containing the screen factor corresponding to the current screen width.

var responsiveBoxOptions: {
    screenByWidth: function(width) {
        if( width < 768 )
            return 'xs';
        if( width < 992 )
            return 'sm';
        if( width < 1200 )
            return 'md';
        return 'lg';
    }
}

Layout Grid

The layout elements are positioned against the widget grid specified using the cols and rows options.

var responsiveBoxOptions: {
    rows: [
        { baseSize: 100 },
        { ratio: 1 },
        { ratio: 1, screen: 'sd md' },
        { baseSize: 100 }
    ],
    cols: [
        { ratio: 1 },
        { ratio: 2, screen: 'lg' },
        { ratio: 1 }
    ]
}

An item of an array passed to these options can include the following fields.

• baseSize
  The base height of the row or base width of the column. This field can hold a value of the following types.

  • numeric
    The element size in pixels.

  • string
    A CSS measurement of size (e.g., "55px", "80%", "auto" and "inherit").

  • function
    The function returning the element size.

• ratio
  The row or column size ratio.

• screen
  The screen factor or factors by which the current row or column is used. If this field is not defined, the row or column is used by all screen factors.

Specify Layout Elements

The widget elements are usually specified using the dxItem markup component, as described in the Specify Layout Elements section of this article. The dxResponsiveBox items support the following options used to specify the element position, size and screen factor.

• row
  Specifies the row component of the element location.

• col
  Specifies the column component of the element location.

• rowspan
  Specifies the height of the element in rows.

• colspan
  Specifies the width of the element in columns.

• screen
  The screen factor or factors by which the current location is applied to the element.

For information on the complete set of item options, refer to the Default Item Template reference section of this widget.

<div class="header" data-options="dxItem: { 
    location: [{ row: 0, col: 0, colspan: 3, screen: 'lg'}, { row: 0, col: 0, colspan: 2, screen: 'xs sm md'}]}">Header</div>
<div class="content" data-options="dxItem: { 
    location: [{ row: 1, col: 1, screen: 'lg' }, { row: 1, col: 0, colspan: 2, screen: 'xs sm md' }]}">Content</div>

<div id="myResponsiveBox">
    . . .
    <div data-options="dxItem: itemOptions">
        <div style="height: 200px; width: 200px;" id="myCircularGauge"></div>
    </div>
    . . .
</div>

Angular Approach

<div dx-responsive-box="responsiveBoxOptions">
    . . .
    <div data-options="dxItem: itemOptions">
        <div style="height: 200px; width: 200px;" dx-circular-gauge="gaugeOptions"></div>
    </div>
    . . .
</div>

Knockout Approach

<div data-bind="dxResponsiveBox: responsiveBoxOptions">
    . . .
    <div data-options="dxItem: itemOptions">
        <div style="height: 200px; width: 200px;" data-bind="dxCircularGauge: gaugeOptions"></div>
    </div>
    . . .
</div>