Search results

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

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.

Source
Preview
App.tsx
App.css.jsx
App.jsx
index.jsx
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import './App.css';

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;
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import './App.css';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.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;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('container'));