Angular ResponsiveBox - Arrange Layout Elements

All layout elements are arranged against a layout grid. For example, suppose that you have the following layout grid.

HTML
TypeScript
CSS
  • <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>
  • import { DxResponsiveBoxModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxResponsiveBoxModule
  • ],
  • // ...
  • })
  • 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
TypeScript
CSS
  • <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>
  • import { DxResponsiveBoxModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxResponsiveBoxModule
  • ],
  • // ...
  • })
  • html, body { height: 100%; }
  • #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 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.

HTML
TypeScript
CSS
  • <dx-responsive-box
  • 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>
  • import { DxResponsiveBoxModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxResponsiveBoxModule
  • ],
  • // ...
  • })
  • html, body { height: 100%; }
See Also