jQuery ResponsiveBox - Create the Layout Grid
All ResponsiveBox elements are arranged in a layout grid according to the rows and cols arrays. Each object in these arrays configures a single row or column. Populate these arrays with empty objects to get two sets of equally-sized rows and columns.
jQuery
$(function() {
$("#responsiveBoxContainer").dxResponsiveBox({
// Creates two rows of equal height
rows: [
{ }, { }
],
// Creates three columns of equal width
cols: [
{ }, { }, { }
]
});
});<div id="responsiveBoxContainer"></div>
html, body { height: 100%; }Angular
<dx-responsive-box>
<!-- Creates two rows of equal height -->
<dxi-row></dxi-row>
<dxi-row></dxi-row>
<!-- Creates three columns of equal width -->
<dxi-col></dxi-col>
<dxi-col></dxi-col>
<dxi-col></dxi-col>
</dx-responsive-box>
import { DxResponsiveBoxModule } from 'devextreme-angular';
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxResponsiveBoxModule
],
// ...
})
html, body { height: 100%; }Vue
<template>
<DxResponsiveBox>
<!-- Creates two rows of equal height -->
<DxRow/>
<DxRow/>
<!-- Creates three columns of equal width -->
<DxCol/>
<DxCol/>
<DxCol/>
</DxResponsiveBox>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxResponsiveBox, DxCol, DxRow } from 'devextreme-vue/responsive-box';
export default {
components: {
DxResponsiveBox,
DxCol,
DxRow
}
};
</script>
<style>
html, body { height: 100%; }
</style>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import ResponsiveBox, { Row, Col } from 'devextreme-react/responsive-box';
class App extends React.Component {
render() {
return (
<ResponsiveBox>
{/* Creates two rows of equal height */}
<Row/>
<Row/>
{/* Creates three columns of equal width */}
<Col/>
<Col/>
<Col/>
</ResponsiveBox>
);
}
}
export default App;
html, body { height: 100%; }The baseSize, ratio, and shrink settings control a row or column's size. The baseSize defines the row's or column's initial size in pixels. The size then changes according to ratio and shrink if the ResponsiveBox's size changes.
The ResponsiveBox can provide more space than rows' and columns' baseSizes require:
In this case, the columns' width and rows' height can be increased according to ratios. If all rows or columns have the same ratio, the width or height is increased evenly. The following is an example of when ratios are different:
If ratio applies when there is an available space, shrink applies when space is limited. After all rows' or columns' baseSizes are added up, they may be too large to fit into the container.
shrink determines how much the elements should shrink to fit in this case. The higher the shrink value, the more a row or column shrinks relative to the rest of the rows or columns. The following example illustrates a situation when all elements have the same shrink value:
In the following image, the middle column's shrink value is more than the other columns', and the bottom row's shrink value is more than that of the top row.
The collections of rows and columns may differ depending on the screen's size qualifier. You can use the screen property to specify on which screen types an individual row or column should appear.
jQuery
$(function() {
$("#responsiveBoxContainer").dxResponsiveBox({
rows: [
{ ratio: 1 },
{ ratio: 2, shrink: 2 },
{ ratio: 0.7 }
],
cols: [
{ ratio: 0.5 },
// The following columns appear on medium and large screens only
{ ratio: 2, screen: "md lg" },
{ ratio: 0.5, screen: "md lg" }
]
});
});<div id="responsiveBoxContainer"></div>
html, body { height: 100%; }Angular
<dx-responsive-box>
<dxi-row [ratio]="1"></dxi-row>
<dxi-row [ratio]="2" [shrink]="2"></dxi-row>
<dxi-row [ratio]="0.7"></dxi-row>
<dxi-col [ratio]="0.5" [shrink]="0.5"></dxi-col>
<!-- The following columns appear on medium and large screens only -->
<dxi-col [ratio]="2" screen="md lg"></dxi-col>
<dxi-col [ratio]="0.5" screen="md lg"></dxi-col>
</dx-responsive-box>
import { DxResponsiveBoxModule } from 'devextreme-angular';
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxResponsiveBoxModule
],
// ...
})
html, body { height: 100%; }Vue
<template>
<DxResponsiveBox>
<DxRow :ratio="1"/>
<DxRow :ratio="2" :shrink="2"/>
<DxRow :ratio="0.7"/>
<DxCol :ratio="0.5" :shrink="0.5"/>
<!-- The following columns appear on medium and large screens only -->
<DxCol :ratio="2" screen="md lg"/>
<DxCol :ratio="0.5" screen="md lg"/>
</DxResponsiveBox>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxResponsiveBox, DxCol, DxRow } from 'devextreme-vue/responsive-box';
export default {
components: {
DxResponsiveBox,
DxCol,
DxRow
}
};
</script>
<style>
html, body { height: 100%; }
</style>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import ResponsiveBox, { Row, Col } from 'devextreme-react/responsive-box';
class App extends React.Component {
render() {
return (
<ResponsiveBox>
<Row ratio={1}/>
<Row ratio={2} shrink={2}/>
<Row ratio={0.7}/>
<Col ratio={0.5} shrink={0.5}/>
{/* The following columns appear on medium and large screens only */}
<Col ratio={2} screen="md lg"/>
<Col ratio={0.5} screen="md lg"/>
</ResponsiveBox>
);
}
}
export default App;
html, body { height: 100%; }