JavaScript/jQuery ResponsiveBox - Arrange Layout Elements
All layout elements are arranged against a layout grid. For example, suppose that you have the following layout grid.
- $(function() {
- $("#responsiveBoxContainer").dxResponsiveBox({
- rows: [
- { ratio: 1 }, // Header
- { ratio: 2 }, // Content
- { ratio: 0.7 } // Footer
- ],
- cols: [
- { ratio: 0.5, screen: "md lg" }, // Left-side bar
- { ratio: 2 }, // Content
- { ratio: 0.5, screen: "md lg" } // Right-side bar
- ]
- });
- });
- html, body { height: 100%; }
Every layout element has the location property that allows you to relocate the element within the layout grid or hide it on screens of a specific size. For example, in the following code, the "Left-Side Bar" and "Right-Side Bar" elements are present only on medium and large screens. All the other elements have individual settings for screens of each size.
- <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>
- html, body { height: 100%; }
- #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 }
If on some screens, all elements should be arranged in a single column, assign the size qualifiers of these screens to the singleColumnScreen property. In this case, the layout grid will be ignored in favor of the single-column layout, and all layout elements will have equal heights.
- $(function() {
- $("#responsiveBoxContainer").dxResponsiveBox({
- rows: [
- // Ignored
- ],
- cols: [
- // Ignored
- ],
- // Single-column layout on small and extra small screens
- singleColumnScreen: "xs sm"
- });
- });
- html, body { height: 100%; }
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.