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

https://www.loom.com/share/6a3dff2d99904112968e7ca129a654a2


and code

https://stackblitz.com/edit/angular-pwwask?file=src%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp.component.ts


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.


[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 isOpenBoolean = 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



GO Goutham February 7, 2023 10:13 AM UTC

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



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

Goutham,


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.


[app.component.html]

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

</ejs-dialog>


[app.component.css]

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

    overflowunset;

}



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

Goutham,


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


Loader.
Up arrow icon