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

18 Jan 20235 minutes to read

By default, when scroll the page/container Dialog also scrolled along with the page/container. When a user expects to display the Dialog in the same position without scrolling achieving this in sample level as like below. Here added ‘e-fixed’ class to Dialog element and prevent the scrolling.

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