How to customize width and hieght of Dialog component of Office UI fabric in SPFX webparts
-
19-01-2021 - |
Pregunta
I need a Office UI fabric dialog component of 600 by 600 px in SPFX webpart. Tried className and containerClassName attributes both didn't work. The style attribute doesn't.
The max-width is set to 480px. I need to override this(both height and width).
Somebody please help.
return (
<div>
<DefaultButton secondaryText="Opens Dialog" onClick={this._showDialog} text="Open Dialog" />
<Dialog
hidden={this.state.hideDialog}
onDismiss={this._closeDialog}
dialogContentProps={{
type: DialogType.normal,
title: 'All emails together',
subText: 'sample text',
}}
modalProps={{
titleAriaId: 'myLabelId',
subtitleAriaId: 'mySubTextId',
isBlocking: false,
containerClassName: 'ms-dialogMainOverride'
}}>
<DialogFooter>
<PrimaryButton onClick={this._closeDialog} text="Save" />
<DefaultButton onClick={this._closeDialog} text="Cancel" />
</DialogFooter>
</Dialog>
</div>);
Solución
It was simple. Add a custom class in containerClassName property.
So in the SCSS file use the below code
.textDialog {
max-width: 100%;
width : 600px;
max-height: 100%;
height : 600px;
}
In tsx file use the below code
<Dialog
hidden={this.state.hideDialog}
onDismiss={this._closeDialog}
type={DialogType.normal}
title={ "Large" }
subText={ "Hello world" }
containerClassName={ 'ms-dialogMainOverride ' + styles.textDialog}>
</Dialog>
And it works. Thanks anyway
Otros consejos
I found this issue on Github:
https://github.com/OfficeDev/office-ui-fabric-core/issues/608
override the max-width property
.ms-Dialog-main {
max-width: 600px !important;
max-height: 600px !important;
width: 600px;
height: 600px;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a sharepoint.stackexchange