Display a Dialog with custom position in React Dialog component

20 Apr 2021 / 1 minute to read

By default, the dialog is displayed in the center of the target container. The dialog position can be set using the position property by providing custom X and Y coordinates. The dialog can be positioned inside the target based on the given X and Y values.

Source

Preview

App.tsx

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 render() {
    const firstPosition: any = { X: 160, Y: 14 };
    const secondPosition: any = { X: 160, Y: 240 };
    const effect: any = { effect: 'None' };
  return (
  <div className="App" id='dialog-target'>
      <DialogComponent id='firstDialog' header='Position-01' visible={true}
      width='360px' height='120px' target='#dialog-target'
      closeOnEscape={false} animationSettings={effect} position={firstPosition}
      >
     The dialog is positioned at X: 160, Y: 14 coordinates </DialogComponent>

      <DialogComponent id='secondDialog' header='Position-02' visible={true}
      width='360px' height='120px' target='#dialog-target'
      closeOnEscape={false} animationSettings={effect} position={secondPosition}
      >
     The dialog is positioned at X: 160, Y: 240 coordinates </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 {
    render() {
        const firstPosition = { X: 160, Y: 14 };
        const secondPosition = { X: 160, Y: 240 };
        const effect = { effect: 'None' };
        return (<div className="App" id='dialog-target'>
      <DialogComponent id='firstDialog' header='Position-01' visible={true} width='360px' height='120px' target='#dialog-target' closeOnEscape={false} animationSettings={effect} position={firstPosition}>
     The dialog is positioned at X: 160, Y: 14 coordinates </DialogComponent>

      <DialogComponent id='secondDialog' header='Position-02' visible={true} width='360px' height='120px' target='#dialog-target' closeOnEscape={false} animationSettings={effect} position={secondPosition}>
     The dialog is positioned at X: 160, Y: 240 coordinates </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'));