Position the dialog on center of the page on scrolling in React Dialog component

20 Feb 20265 minutes to read

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

[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;