i have faced other issue with ejs-toolbar in overflowMode "Popup".It is not working as expected.
Please check video recording here
https://www.loom.com/share/6a3dff2d99904112968e7ca129a654a2
and code
Thank you.
Hi Goutham,
Sample: https://stackblitz.com/edit/ej2-angular-toolbar-inside-dialog-sample?file=src%2Fapp.component.ts
You can resolve the problem by rendering the toolbar after the dialog is opened by checking a ngIf condition as shown in the below code snippet.
[app.component.html]
<ejs-dialog> <ng-template #content> <div *ngIf="isOpen"> <ejs-toolbar overflowMode="Popup" width="400px"> <e-items> <e-item text="For signatures" tooltipText="For signatures" width="170px" overflow="Hide"> </e-item> </e-items> </ejs-toolbar> </div> </ng-template> </ejs-dialog> |
[app.component.ts]
export class AppComponent { @ViewChild('Dialog1') public isOpen: Boolean = false;
ngAfterViewInit(): void { document.getElementById('dlgbtn').focus(); } // On Dialog close, 'Open' Button will be shown public dialogClose = (): void => { document.getElementById('dlgbtn').style.display = ''; this.isOpen = false; } // On Dialog open, 'Open' Button will be hidden public dialogOpen = (): void => { document.getElementById('dlgbtn').style.display = 'none'; this.isOpen = true; } } |
Regards,
Ravikumar Venkatesan
Hi,
I have followed the same steps,But there is some other issue that toolbar popup is increasing the fixed dialog hieght.
Its not opening over the top of dialog.
Could Please check the issue
https://www.loom.com/share/06133682c15b4738b0499110b9d05e00
https://stackblitz.com/edit/ej2-angular-toolbar-inside-dialog-sample-mdl43j?file=src%2Fapp.component.html,src%2Fapp.component.ts
Goutham,
You can resolve your reported problem by overriding the default styles of the dialog as shown in the below code snippet.
[app.component.html]
<ejs-dialog #Dialog1 [buttons]="dlgButtons" cssClass="dialog-toolbar"> </ejs-dialog> |
[app.component.css]
.dialog-toolbar.e-dialog .e-dlg-content { overflow: unset; } |
Thank you ,it works for me.
Goutham,
You are welcome. Please get back to us if you need any other assistance.