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.
POPrince Oliver Syncfusion Team January 29, 2019 10:01 AM UTC
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.