Size Modes for Syncfusion® React Components

20 Aug 202518 minutes to read

Modern web applications need to provide consistent user experiences across a variety of devices—from desktops to mobile screens. Syncfusion® React components offer two size modes to address this: normal (default) and touch (bigger). These modes allow interfaces to adapt for both mouse and touch interactions, improving usability and accessibility on any device.

Overview of Size Modes

Size modes control the dimensions, spacing, and tap/click target sizes of UI controls:

  • Normal Mode: The default; optimized for mouse and keyboard users, providing standard-sized controls.
  • Touch (Bigger) Mode: Enlarges controls and increases spacing for improved usability on touch-screen and mobile devices.

Switching modes helps ensure comfortable and accessible interfaces on a wide range of devices.

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/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/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/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/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/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/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>

Customizing font size for all components

To globally adjust text size in all Syncfusion® React components, override the .e-control class:

    .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.

See also