Center the dialog on page scroll in React Dialog

4 Sep 20265 minutes to read

By default, the React Dialog scrolls along with the page or container. To keep the React Dialog fixed in the center of the viewport while the page scrolls, apply the e-fixed class to the React Dialog element. This prevents the React Dialog from moving when the user scrolls the page, maintaining its centered position in the viewport.

e-fixed is a built-in CSS class provided by the React Dialog component. It can be applied via the cssClass property, either at render time or dynamically (for example, in a button click handler or the open event). In the following sample, the e-fixed class is applied to the React Dialog when the “Prevent React Dialog Scroll” button is clicked.

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    dialogInstance;
    handleClick = () => {
        this.dialogInstance.cssClass = 'e-fixed';
    };
    render() {
        return (<div className="App" id='dialog-target'>
    <DialogComponent header='Dialog' width='250px' ref={dialog => this.dialogInstance = dialog} target='#dialog-target' closeOnEscape={false}>
      <button className="e-control e-btn" id="targetButton" role="button" onClick={this.handleClick = this.handleClick}>Prevent Dialog Scroll</button>
    </DialogComponent>
    </div>);
    }
}
export default App;

app.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

class App extends React.Component<{}, {}> {
  public dialogInstance: DialogComponent;
  public handleClick = () => {
      this.dialogInstance.cssClass = 'e-fixed';
  }

  public render() {
    return (
    <div className="App" id='dialog-target'>
    <DialogComponent header='Dialog' width='250px' ref={dialog => this.dialogInstance = dialog!}
    target='#dialog-target' closeOnEscape={false}>
      <button className="e-control e-btn" id="targetButton" role="button" onClick={this.handleClick = this.handleClick}>Prevent Dialog Scroll</button>
    </DialogComponent>
    </div>
    );
  }
}
export default App;

[Functional-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    let dialogInstance;
    function handleClick() {
        dialogInstance.cssClass = 'e-fixed';
    }
    return (<div className="App" id='dialog-target'>
        <DialogComponent header='Dialog' width='250px' ref={dialog => dialogInstance = dialog} target='#dialog-target' closeOnEscape={false}>
        <button className="e-control e-btn" id="targetButton" role="button" onClick={handleClick}>Prevent Dialog Scroll</button>
        </DialogComponent>
      </div>);
}
export default App;

app.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App() {
    let dialogInstance: DialogComponent;
    function handleClick (){
        dialogInstance.cssClass = 'e-fixed';
    }
  
    return (
      <div className="App" id='dialog-target'>
        <DialogComponent header='Dialog' width='250px' ref={dialog => dialogInstance = dialog!}
        target='#dialog-target' closeOnEscape={false}>
        <button className="e-control e-btn" id="targetButton" role="button" onClick={handleClick}>Prevent Dialog Scroll</button>
        </DialogComponent>
      </div>
    );
}
export default App;