DevExtreme jQuery - Arrange Layout Elements
All layout elements are arranged against a layout grid. For example, suppose that you have the following layout grid.
jQuery
JavaScript
$(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
TypeScript
<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
CSS
<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
TypeScript
CSS
<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
JavaScript
$(function() {
$("#responsiveBoxContainer").dxResponsiveBox({
rows: [
// Ignored
],
cols: [
// Ignored
],
// Single-column layout on small and extra small screens
singleColumnScreen: "xs sm"
});
});Angular
HTML
TypeScript
<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
Feedback