Your search did not match any results.
ResponsiveBox

Responsive Box

Documentation

The ResponsiveBox widget allows you to create an application or a website with a layout adapted to different screen sizes. In this demo, each element on the page is a ResponsiveBox element whose location is specified for each possible screen size.

Copy to CodePen
Apply
Reset
$(function(){ $("#responsive-box").dxResponsiveBox({ rows: [ { ratio: 1 }, { ratio: 2 }, { ratio: 2, screen: "xs" }, { ratio: 1 } ], cols: [ { ratio: 1 }, { ratio: 2, screen: "lg" }, { ratio: 1 } ], singleColumnScreen: "sm", screenByWidth: function(width) { return ( width < 700 ) ? 'sm' : 'lg'; } }); });
<!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="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/17.2.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="page"> <div id="responsive-box"> <div class="header" data-options="dxItem: { location: [{ row: 0, col: 0, colspan: 3, screen: 'lg' }, { row: 0, col: 0, colspan: 2, screen: 'sm' }] }"> <p>Header</p> </div> <div class="content" data-options="dxItem: { location: [{ row: 1, col: 1, screen: 'lg' }, { row: 1, col: 0, colspan: 2, screen: 'sm' }] }"> <p>Content</p> </div> <div class="left-side-bar" data-options="dxItem: { location: [{ row: 1, col: 0, screen: 'lg' }, { row: 2, col: 0, screen: 'sm' }] }"> <p>Left Bar</p> </div> <div class="right-side-bar" data-options="dxItem: { location: [{ row: 1, col: 2, screen: 'lg' }, { row: 2, col: 1, screen: 'sm' }] }"> <p>Right Bar</p> </div> <div class="footer" data-options="dxItem: { location: [{ row: 2, col: 0, colspan: 3, screen: 'lg' }, { row: 3, col: 0, colspan: 2, screen: 'sm' }] }"> <p>Footer</p> </div> </div> </div> </div> </body> </html>
.demo-container, #page{ height: 100%; min-height: 300px; } #page .header { background-color: rgba(243, 158, 108, 0.80); text-align: center; } #page .content { background-color: rgba(245, 229, 166, 0.80); } #page .left-side-bar { background-color: rgba(148, 215, 199, 0.80); } #page .right-side-bar { background-color: rgba(119, 199, 231, 0.80); } #page .footer { background-color: rgba(123, 155, 207, 0.80); } .item { height: 100%; } #page p { font-size: 20px; padding-top: 10px; text-align: center; }