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.
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.
See Also
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.