DevExtreme jQuery - Overview
The ResponsiveBox widget allows you to create an application or a website with a layout adapted to different screen sizes.
The following code creates a simple ResponsiveBox. The widget defines an ordinary page layout: a header, a footer, content area, left- and right-side bars. On small and extra small screens, the bars are hidden to give more space to the content. Note that the height of all elements that are ancestors to the ResponsiveBox (such as <body> and <html>) is explicitly set to "100%". This makes the ResponsiveBox occupy full screen height.
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>$(function() {
$("#responsiveBoxContainer").dxResponsiveBox({
rows: [
{ ratio: 1 },
{ ratio: 2 },
{ ratio: 0.7 }
],
cols: [
{ ratio: 0.5, screen: "md lg" },
{ ratio: 2 },
{ ratio: 0.5, screen: "md lg" }
]
});
});#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">
<dxi-row [ratio]="1"></dxi-row>
<dxi-row [ratio]="2"></dxi-row>
<dxi-row [ratio]="0.7"></dxi-row>
<dxi-col [ratio]="0.5" screen="md lg"></dxi-col>
<dxi-col [ratio]="2"></dxi-col>
<dxi-col [ratio]="0.5" screen="md lg"></dxi-col>
<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 }The ResponsiveBox elements in the code above are declared using the dxItem markup component. An object passed to this component can have the following fields.
All ResponsiveBox elements are arranged against a layout grid defined by the rows and cols arrays. For further information, see the Create the Layout Grid topic.