Size Mode for Syncfusion React Components
10 Jan 202418 minutes to read
An application that is designed to be accessed through a web browser on various devices, including desktop computers and mobile devices, may have a distinct layout or user interface on a mobile device compared to a desktop computer to better suit the smaller screen size.
Syncfusion React components support both touch (bigger) and normal size modes. Touch mode creates a responsive design for mobile devices by adding the e-bigger class, which enhances interactions, visibility, and the overall experience.
Size mode for application
The user can enable touch mode (bigger) for the entire application by adding the e-bigger class to the body element in the index.html file as follows:
<body className="e-bigger">
...
</body>
Size mode for a component
The user can enable touch mode (bigger) for a component by adding the e-bigger class to the div element that contains the component. Another way of enabling touch mode is by adding the e-bigger class using the available cssClass property of the component.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
//Enable ripple effect
enableRipple(true);
function App() {
const content = "Button";
return (<div className="e-bigger">
<ButtonComponent content={content}></ButtonComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
//Enable ripple effect
enableRipple(true);
function App() {
const content = "Button";
return (
<div className="e-bigger">
<ButtonComponent content={content}></ButtonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Change size mode for application at runtime
The user can change the size mode of the application between touch and normal (mouse) mode at runtime by adding and removing the e-bigger class. The following steps explain how to change the size mode of an application at runtime:
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import { enableRipple } from '@syncfusion/ej2-base';
//Enable ripple effect
enableRipple(true);
function App() {
const touchContent = "Touch Mode";
const mouseContent = "Mouse Mode";
function btnClick() {
document.body.classList.add('e-bigger');
}
;
function mouseClick() {
document.body.classList.remove('e-bigger');
}
return (<div>
<ButtonComponent id='touch' content={touchContent} onClick={btnClick.bind(this)}></ButtonComponent>
<ButtonComponent id='mouse' content={mouseContent} onClick={mouseClick.bind(this)}></ButtonComponent>
<div>
<CalendarComponent id="calendar"/>
</div>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import { enableRipple } from '@syncfusion/ej2-base';
//Enable ripple effect
enableRipple(true);
function App() {
const touchContent = "Touch Mode";
const mouseContent = "Mouse Mode";
function btnClick() {
document.body.classList.add('e-bigger');
};
function mouseClick() {
document.body.classList.remove('e-bigger');
}
return (
<div>
<ButtonComponent id='touch' content={touchContent} onClick={btnClick.bind(this)}></ButtonComponent>
<ButtonComponent id='mouse' content={mouseContent} onClick={mouseClick.bind(this)}></ButtonComponent>
<div>
<CalendarComponent id="calendar"/>
</div>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Change size mode for a component at runtime
The user can change the size mode of a component between touch and normal (mouse) mode at runtime by setting the e-bigger CSS class.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import { enableRipple } from '@syncfusion/ej2-base';
//Enable ripple effect
enableRipple(true);
function App() {
const touchContent = "Touch Mode";
const mouseContent = "Mouse Mode";
function btnClick() {
let controls = document.querySelectorAll('.control');
for (let index = 0; index < controls.length; index++) {
controls[index].classList.add('e-bigger');
}
}
;
function mouseClick() {
let controls = document.querySelectorAll('.control');
for (let index = 0; index < controls.length; index++) {
controls[index].classList.remove('e-bigger');
}
}
return (<div>
<ButtonComponent id='touch' content={touchContent} onClick={btnClick.bind(this)}></ButtonComponent>
<ButtonComponent id='mouse' content={mouseContent} onClick={mouseClick.bind(this)}></ButtonComponent>
<div className="control">
<CalendarComponent id="calendar"/>
</div>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import { enableRipple } from '@syncfusion/ej2-base';
//Enable ripple effect
enableRipple(true);
function App() {
const touchContent = "Touch Mode";
const mouseContent = "Mouse Mode";
function btnClick() {
let controls = document.querySelectorAll('.control');
for (let index: number = 0; index < controls.length; index++) {
controls[index].classList.add('e-bigger');
}
};
function mouseClick() {
let controls = document.querySelectorAll('.control');
for (let index: number = 0; index < controls.length; index++) {
controls[index].classList.remove('e-bigger');
}
}
return (
<div>
<ButtonComponent id='touch' content={touchContent} onClick={btnClick.bind(this)}></ButtonComponent>
<ButtonComponent id='mouse' content={mouseContent} onClick={mouseClick.bind(this)}></ButtonComponent>
<div className="control">
<CalendarComponent id="calendar"/>
</div>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Change the font size for all components
The user can change the font size for all the components by overriding the CSS for the e-control class as follows:
.e-control, .e-control [class^='e-'], .e-control [class*=' e-'] {
font-size: 1rem;
}Change the font family of Syncfusion React components
The font family of Syncfusion React components can be changed by using the e-control class. This class is present in all Syncfusion components and allows the user to change the font family of all Syncfusion React components in an application.
.e-control {
font-family: Arial !important;
}By including the above CSS code block in the style sheet of the application, the user can change the font-family of all Syncfusion components.