DevExtreme React - Arrange Layout Elements
All layout elements are arranged against a layout grid. For example, suppose that you have the following layout grid.
jQuery
$(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 ] }); });
Angular
<html style="height:100%"> <body style="height:100%"> <dx-responsive-box id="responsiveBox"> <dxi-row [ratio]="1"></dxi-row> <!-- Header --> <dxi-row [ratio]="2"></dxi-row> <!-- Content --> <dxi-row [ratio]="0.7"></dxi-row> <!-- Footer --> <dxi-col [ratio]="0.5" screen="md lg"></dxi-col> <!-- Left-side bar --> <dxi-col [ratio]="2"></dxi-col> <!-- Content --> <dxi-col [ratio]="0.5" screen="md lg"></dxi-col> <!-- Right-side bar --> </dx-responsive-box> </body> </html>
import { DxResponsiveBoxModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxResponsiveBoxModule ], // ... })
Every layout element has the location option 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.
jQuery
<html style="height:100%"> <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> </html>
#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 }
Angular
<html style="height:100%"> <body style="height:100%"> <dx-responsive-box id="responsiveBox"> <!-- Layout grid is configured here --> <dxi-item class="header"> <dxi-location screen="md lg" [row]="0" [col]="0" [colspan]="3"></dxi-location> <dxi-location screen="xs sm" [row]="0" [col]="0"></dxi-location> <p>Header</p> </dxi-item> <dxi-item class="content"> <dxi-location screen="md lg" [row]="1" [col]="1"></dxi-location> <dxi-location screen="xs sm" [row]="1" [col]="0"></dxi-location> <p>Content</p> </dxi-item> <dxi-item class="left-side-bar"> <dxi-location screen="md lg" [row]="1" [col]="0"></dxi-location> <p>Left Bar</p> </dxi-item> <dxi-item class="right-side-bar"> <dxi-location screen="md lg" [row]="1" [col]="2"></dxi-location> <p>Right Bar</p> </dxi-item> <dxi-item class="footer"> <dxi-location screen="md lg" [row]="2" [col]="0" [colspan]="3"></dxi-location> <dxi-location screen="xs sm" [row]="2" [col]="0"></dxi-location> <p>Footer</p> </dxi-item> </dx-responsive-box> </body> </html>
import { DxResponsiveBoxModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxResponsiveBoxModule ], // ... })
#responsiveBox 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 option. In this case, the layout grid will be ignored in favor of the single-column layout, and all layout elements will have equal heights.
jQuery
$(function() { $("#responsiveBoxContainer").dxResponsiveBox({ rows: [ // Ignored ], cols: [ // Ignored ], // Single-column layout on small and extra small screens singleColumnScreen: "xs sm" }); });
Angular
<html style="height:100%"> <body style="height:100%"> <dx-responsive-box id="responsiveBox" singleColumnScreen="xs sm"> <!-- Single-column layout on small and extra small screens --> <dxi-row ...></dxi-row> <!-- Ignored --> <dxi-col ...></dxi-col> <!-- Ignored --> </dx-responsive-box> </body> </html>
import { DxResponsiveBoxModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxResponsiveBoxModule ], // ... })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.