DevExtreme Angular - Arrange Layout Elements
All layout elements are arranged against a layout grid. For example, suppose that you have the following layout grid.
- <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 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.
- <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 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.
- <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
If you have technical questions, please create a support ticket in the DevExpress Support Center.