React ResponsiveBox - Arrange Layout Elements
All layout elements are arranged against a layout grid. For example, suppose that you have the following layout grid.
- 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}/> {/* Header */}
- <Row ratio={2}/> {/* Content */}
- <Row ratio={0.7}/> {/* Footer */}
- <Col ratio={0.5} screen="md lg"/> {/* Left-side bar */}
- <Col ratio={2}/> {/* Content */}
- <Col ratio={0.5} screen="md lg"/> {/* Right-side bar */}
- </ResponsiveBox>
- );
- }
- }
- export default App;
- 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.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import ResponsiveBox, { Row, Col, Item, Location } from 'devextreme-react/responsive-box';
- class App extends React.Component {
- render() {
- return (
- <ResponsiveBox>
- {/* Layout grid is configured here */}
- <Item>
- <Location screen="md lg" row={0} col={0} colspan={3}/>
- <Location screen="xs sm" row={0} col={0}/>
- <div className="header item">
- <p>Header</p>
- </div>
- </Item>
- <Item>
- <Location screen="md lg" row={1} col={1}/>
- <Location screen="xs sm" row={1} col={0}/>
- <div className="content item">
- <p>Content</p>
- </div>
- </Item>
- <Item>
- <Location screen="md lg" row={1} col={0}/>
- <div className="left-side-bar item">
- <p>Left Bar</p>
- </div>
- </Item>
- <Item>
- <Location screen="md lg" row={1} col={2}/>
- <div className="right-side-bar item">
- <p>Right Bar</p>
- </div>
- </Item>
- <Item>
- <Location screen="md lg" row={2} col={0} colspan={3}/>
- <Location screen="xs sm" row={2} col={0}/>
- <div className="footer item">
- <p>Footer</p>
- </div>
- </Item>
- </ResponsiveBox>
- );
- }
- }
- export default App;
- html, body { height: 100%; }
- #responsiveBox div {
- font-size: 16px;
- padding-top: 10px;
- text-align: center;
- }
- .item { height: 100%; }
- .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.
- 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 ...
- singleColumnScreen="xs sm"> {/* Single-column layout on small and extra small screens */}
- <Row ... /> {/* Ignored */}
- <Col ... /> {/* Ignored */}
- {/* ... */}
- </ResponsiveBox>
- );
- }
- }
- export default App;
- html, body { height: 100%; }
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.