Z-index in editing popup

[Atlante Dev Team]

Hi,

I use Angular Material tools from Google, the datepicker and the select list. I use the DataGrid to display a form (custom template) for adding or editing an item of the grid, using the "actions" Add and Delete of the grid. 

This displays a popup with the form. The first opening, it works like a charm, the z-index of the popup is set to 1000. If we open it a second time, the z-index is set to 1001, which breaks the datetime picker and the select list, which are now hidden behind the popup.

With this dynamic z-index positionning, how can I fix that ? I don't understand why it's different the second time.

Thank you.

[Prince Oliver]

Hello Atlante Dev Team, 

Thank you for contacting Syncfusion support. 

By default, the z-index value is calculated based on page elements and incremented one more (+1) with calculated z-index value, every time dialog is opened. When using Syncfusion components (DatePicker and DropDownList), its z-index value also gets updated properly on the open state. The issue arises with popup from DatePicker and DropDownList of Angular. To resolve this, we suggest you set the static zIndex value for dialog component. So, the z-index value will not be changed when dialog is opened. Kindly refer to the following code snippet. 

<ejs-dialog #template height='height' animationSettings='animationSettings' zIndex='1000' showCloseIcon='showCloseIcon' 

    target='target' width='width' header='header' buttons='dlgButtons'> 

    <ng-template #content> 

        <h4>Date-Picker</h4> 

        <mat-form-field> 

            <input matInput matDatepicker="picker" placeholder="Choose a date"> 

            <mat-datepicker-toggle matSuffix for="picker"></mat-datepicker-toggle> 

            <mat-datepicker #picker></mat-datepicker> 

        </mat-form-field> 

        <h4>Basic mat-select</h4> 

        <mat-form-field> 

            <select matNativeControl required> 

                <option value="volvo">Volvo</option> 

                <option value="saab">Saab</option> 

                <option value="mercedes">Mercedes</option> 

                <option value="audi">Audi</option> 

            </select> 

        </mat-form-field> 

    </ng-template> 

</ejs-dialog> 

We have prepared a sample for our requirement, please find the sample at the following location: https://stackblitz.com/edit/angular-ymgadg-ighkc6 

To know more details about dialog component, please refer the below documentation. 

https://ej2.syncfusion.com/angular/documentation/dialog/getting-started/?no-cache=1 

Please let us know if you need any further assistance on this. 

Regards, 

Prince