I am using MdlDialogService to open a help dialog from my home component:
openHelpDialog(){
this.dialogService.showCustomDialog({
component: HelpComponent,
animate: true,
isModal: true,
styles: {'width': '500px', 'overflow-y':'scroll'},
clickOutsideToClose: true
})
}
And in my app component:
<app-home></app-home>
<dialog-outlet></dialog-outlet>
Now when I have a lot of help content then the modal height is simply chopped:
How can I limit the height to a certain % and then use scrolling to see the content?
Use css max hight proprty. css max hegight property
max-height: 250px for styles property.
I just added max-height in style like following:
this.dialogService.showCustomDialog({
component: HelpComponent,
animate: true,
isModal: true,
styles: {'width': '500px', 'max-height':'500px' ,'overflow-y':'scroll'},
clickOutsideToClose: true
})