Show dialog with full screen in React Dialog component

18 Jan 202310 minutes to read

You can show the dialog in fullscreen by passing true as argument to the dialog show method.

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    dialogInstance;
    buttons = [{
            buttonModel: {
                content: 'OK',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                this.dialogInstance.hide();
            }
        },
        {
            buttonModel: {
                content: 'Cancel',
                cssClass: 'e-flat'
            },
            'click': () => {
                this.dialogInstance.hide();
            }
        }];
    handleClick() {
        this.dialogInstance.show(true);
    }
    render() {
        return (<div className="App" id='dialog-target'>
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>

      <DialogComponent header='Dialog' showCloseIcon={true} visible={false} width='250px' target='#dialog-target' buttons={this.buttons} ref={dialog => this.dialogInstance = dialog}>
      This is a Dialog with fullscreen display </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 buttons: any = [{
    buttonModel: {
        content: 'OK',
        cssClass: 'e-flat',
        isPrimary: true,
    },
    'click': () => {
        this.dialogInstance.hide();
    }
},
{
    buttonModel: {
        content: 'Cancel',
        cssClass: 'e-flat'
    },
    'click': () => {
        this.dialogInstance.hide();
    }
}];

public handleClick() {
    this.dialogInstance.show(true);
}

public render() {
  return (
  <div className="App" id='dialog-target'>
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>

      <DialogComponent header='Dialog' showCloseIcon={true} visible={false} width='250px' target='#dialog-target' buttons={this.buttons} ref={dialog => this.dialogInstance = dialog!}>
      This is a Dialog with fullscreen display </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;
    const buttons = [{
            buttonModel: {
                content: 'OK',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                dialogInstance.hide();
            }
        },
        {
            buttonModel: {
                content: 'Cancel',
                cssClass: 'e-flat'
            },
            'click': () => {
                dialogInstance.hide();
            }
        }];
    function handleClick() {
        dialogInstance.show(true);
    }
    return (<div className="App" id='dialog-target'>
            <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
            <DialogComponent header='Dialog' showCloseIcon={true} visible={false} width='250px' target='#dialog-target' buttons={buttons} ref={dialog => dialogInstance = dialog}>
            This is a Dialog with fullscreen display </DialogComponent>
        </div>);
}
export default App;

app.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App(){
    let dialogInstance: DialogComponent;
    const buttons: any = [{
        buttonModel: {
            content: 'OK',
            cssClass: 'e-flat',
            isPrimary: true,
        },
        'click': () => {
            dialogInstance.hide();
        }
    },
    {
        buttonModel: {
            content: 'Cancel',
            cssClass: 'e-flat'
        },
        'click': () => {
            dialogInstance.hide();
        }
    }];
  
    function handleClick() {
        dialogInstance.show(true);
    }
    return (
        <div className="App" id='dialog-target'>
            <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
            <DialogComponent header='Dialog' showCloseIcon={true} visible={false} width='250px' target='#dialog-target' buttons={buttons} ref={dialog => dialogInstance = dialog!}>
            This is a Dialog with fullscreen display </DialogComponent>
        </div>
    );
  }
  export default App;