Overview

The Box widget allows you to arrange various elements within it. Separate and adaptive, the Box widget acts as a building block for the layout.

View Demo

The following code adds a simple Box containing three items to your page. The items are plain texts placed in differently-colored rectangles. They have an equal width specified by equal values of the ratio option. The items are arranged in a row.

HTML

<div id="boxContainer">
    <div class="box-item orange" data-options="dxItem: { ratio: 1 }"> Item 1 </div>
    <div class="box-item yellow" data-options="dxItem: { ratio: 1 }"> Item 2 </div>
    <div class="box-item green"  data-options="dxItem: { ratio: 1 }"> Item 3 </div>
</div>

JavaScript

$(function() {
    $("#boxContainer").dxBox({
        direction: "row",
        height: 100
    });
});

CSS

.box-item {
    text-align: center;
    padding-top: 34px;
    font-size: 16px;
}

.orange { background: #f39e6c }
.yellow { background: #f5e5a6 }
.green { background: #94d7c7 }

Note that the Box items in the code above are declared using the dxItem markup component. An object passed to this component can have the following fields.

Overview

See Also