You can show the dialog in fullscreen by passing true
as argument to the dialog show method.
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import './App.css';
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;
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import './App.css';
class App extends React.Component {
constructor() {
super(...arguments);
this.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;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('container'));