Free Trial Buy
    Your search did not match any results.
    Box

    Box

    Documentation

    The Box component allows you to arrange various elements within it. Separate and adaptive, the Box acts as a building block for the layout. In this demo, you can see how the component is used to layout different elements on a page.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    Copy to CodePen
    Apply
    Reset
    window.onload = function() { var viewModel = { boxOptions1: { direction: "row", width: "100%", height: 75 }, boxOptions2: { direction: "row", width: "100%", height: 75, align: "center", crossAlign: "center" }, boxOptions3: { direction: "col", width: "100%", height: 250 }, boxOptions4: { direction: "row", width: "100%", height: 125 } }; ko.applyBindings(viewModel, document.getElementById("container")); };
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/21.1.3/js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="container"> <div data-bind="dxBox: boxOptions1"> <div class="rect demo-dark" data-options="dxItem: {ratio: 1}"> ratio = 1 </div> <div class="rect demo-light" data-options="dxItem: {ratio: 2}"> ratio = 2 </div> <div class="rect demo-dark" data-options="dxItem: {ratio: 1}"> ratio = 1 </div> </div> <br> <div data-bind="dxBox: boxOptions1"> <div class="rect demo-dark" data-options="dxItem: {ratio: 0, baseSize: 150}"> 150px </div> <div class="demo-light" data-options="dxItem: {ratio: 1}"> <div data-bind="dxBox: $parent.boxOptions2"> <div data-options="dxItem: {ratio: 0, baseSize: 50}"> <div class="small" ></div> </div> <div data-options="dxItem: {ratio: 0, baseSize: 50}"> <div class="small" ></div> </div> <div data-options="dxItem: {ratio: 0, baseSize: 50}"> <div class="small" ></div> </div> </div> </div> <div class="rect demo-dark" data-options="dxItem: {ratio: 0, baseSize: '10%'}"> 10% </div> </div> <br> <div id="box3" data-bind="dxBox: boxOptions3"> <div class="rect demo-dark header" data-options="dxItem: {ratio: 1}"> Header </div> <div data-options="dxItem: {ratio: 2, baseSize: 0}"> <div data-bind="dxBox: $parent.boxOptions4"> <div class="rect demo-dark" data-options="dxItem: {ratio: 1}"> Left Bar </div> <div class="rect demo-light" data-options="dxItem: {ratio: 1}"> Content </div> <div class="rect demo-dark" data-options="dxItem: {ratio: 1}"> Right Bar </div> </div> </div> <div class="rect demo-dark footer" data-options="dxItem: {ratio: 1}"> Footer </div> </div> </div> </div> </body> </html>
    .rect{ text-align: center; font-size: 30px; padding-top: 10px; height: 100%; } .demo-light{ background: rgba(245, 229, 166, 0.5) } .demo-dark{ background: rgba(148, 215, 199, 0.5); } .demo-dark.header{ background: rgba(243, 158, 108, 0.5); } .demo-dark.footer{ background: rgba(123, 155, 207, 0.5); } .small{ height: 50px; border: 1px solid lightgray; }