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.

JavaScript
CSS
  • $(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.

HTML
CSS
  • <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.

JavaScript
CSS
  • $(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