Having trouble getting help?
Contact Support
Contact Support
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]
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;
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]
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;
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;