Overview

The ResponsiveBox widget allows you to create an application or a website with a layout adapted to different screen sizes.

DevExtreme HTML5 JavaScript ResponsiveBox

View Demo Watch Video

The following code creates a simple ResponsiveBox. The widget defines an ordinary page layout: a header, a footer, content area, left- and right-side bars. On small and extra small screens, the bars are hidden to give more space to the content. Note that the height of all elements that are ancestors to the ResponsiveBox (such as <body> and <html>) is explicitly set to "100%". This makes the ResponsiveBox occupy full screen height.

HTML
JavaScript
CSS
<html style="height:100%">
    <!-- ... -->
</html>

<body style="height:100%">
    <div id="responsiveBoxContainer">
        <div class="header" data-options="dxItem: {
            location: [{
                screen: 'md lg',
                row: 0, col: 0,
                colspan: 3
            }, {
                screen: 'xs sm',
                row: 0, col: 0
            }]
        }"> <p>Header</p> </div>

        <div class="content" data-options="dxItem: {
            location: [{
                screen: 'md lg',
                row: 1, col: 1
            }, {
                screen: 'xs sm',
                row: 1, col: 0
            }]
        }"> <p>Content</p> </div>

        <div class="left-side-bar" data-options="dxItem: {
            location: {
                screen: 'md lg',
                row: 1, col: 0
            }
        }"> <p>Left Bar</p> </div>

        <div class="right-side-bar" data-options="dxItem: {
            location: {
                screen: 'md lg',
                row: 1, col: 2
            }
        }"> <p>Right Bar</p> </div>

        <div class="footer" data-options="dxItem: {
            location: [{
                screen: 'md lg',
                row: 2, col: 0,
                colspan: 3
            }, {
                screen: 'xs sm',
                row: 2, col: 0
            }]
        }"> <p>Footer</p> </div>
    </div>
</body>
$(function() {
    $("#responsiveBoxContainer").dxResponsiveBox({
        rows: [
            { ratio: 1 },
            { ratio: 2 },
            { ratio: 0.7 }
        ],
        cols: [
            { ratio: 0.5, screen: "md lg" },
            { ratio: 2 },
            { ratio: 0.5, screen: "md lg" }
        ]
    });
});
#responsiveBoxContainer p {
    font-size: 16px;
    padding-top: 10px;
    text-align: center;
}

.header { background: #f39e6c }
.content { background: #f5e5a6 }
.left-side-bar { background: #94d7c7 }
.right-side-bar { background: #77c7e7 }
.footer { background: #7b9bcf }

The ResponsiveBox elements in the code above are declared using the dxItem markup component. An object passed to this component can have the following fields.

All ResponsiveBox elements are arranged against a layout grid defined by the rows and cols arrays. For further information, see the Create the Layout Grid topic.

See Also