Display a Dialog with custom position in React Dialog component

02 Feb 2023 / 2 minutes 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.

[Class-component]

Source

Preview

App.jsx

App.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
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 { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

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;

[Functional-component]

Source

Preview

App.jsx

App.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    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 { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App() {
    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;