We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ejs-toolbar in overflowMode "Popup" - from 180286

i have faced other issue with ejs-toolbar in overflowMode "Popup".It is not working as expected.

Please check video recording here


and code


Thank you.

5 Replies

RV Ravikumar Venkatesan Syncfusion Team February 6, 2023 09:43 AM UTC

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.



    <ng-template #content>

      <div *ngIf="isOpen">

        <ejs-toolbar overflowMode="Popup" width="400px">


            <e-item text="For signatures" tooltipText="For signatures" width="170px" overflow="Hide">








export class AppComponent {


    public isOpenBoolean = false;


    ngAfterViewInit(): void {



    // 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;




Ravikumar Venkatesan

GO Goutham February 7, 2023 10:13 AM UTC

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

RV Ravikumar Venkatesan Syncfusion Team February 8, 2023 07:21 PM UTC


Sample: https://stackblitz.com/edit/ej2-angular-toolbar-inside-dialog-sample-ma9yi3?file=src%2Fapp.component.css

You can resolve your reported problem by overriding the default styles of the dialog as shown in the below code snippet.


  <ejs-dialog #Dialog1 [buttons]="dlgButtons" cssClass="dialog-toolbar">



.dialog-toolbar.e-dialog .e-dlg-content {



GO Goutham February 9, 2023 05:57 AM UTC

Thank you ,it works for me.

RV Ravikumar Venkatesan Syncfusion Team February 10, 2023 01:19 PM UTC


You are welcome. Please get back to us if you need any other assistance.

Live Chat Icon For mobile
Up arrow icon