Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Box

Box

Documentation

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. In this demo, you can see how the widget is used to layout different elements on a page.

Copy to CodePen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.boxOptions1 = { direction: "row", width: "100%", height: 75 }; $scope.boxOptions2 = { direction: "row", width: "100%", height: 75, align: "center", crossAlign: "center" }; $scope.boxOptions3 = { direction: "col", width: "100%", height: 250 }; $scope.boxOptions4 = { direction: "row", width: "100%", height: 125 }; });
<!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> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/20.2.4/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" ng-app="DemoApp" ng-controller="DemoController"> <div dx-box="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 dx-box="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 dx-box="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 dx-box="boxOptions3"> <div class="rect demo-dark header" data-options="dxItem: {ratio: 1}"> Header </div> <div data-options="dxItem: {ratio: 2, baseSize: 0}"> <div dx-box="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> </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; }