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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Z-index in editing popup

Thread ID:





142303 Jan 26,2019 03:37 PM UTC Jan 29,2019 10:01 AM UTC Angular - EJ 2 1
Tags: Dialog
Atlante Dev Team
Asked On January 26, 2019 03:37 PM UTC


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 [Syncfusion]
Replied On 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. 

<ejs-dialog #template height='height' animationSettings='animationSettings' zIndex='1000' showCloseIcon='showCloseIcon' 
    target='target' width='width' header='header' buttons='dlgButtons'> 
    <ng-template #content> 
            <input matInput matDatepicker="picker" placeholder="Choose a date"> 
            <mat-datepicker-toggle matSuffix for="picker"></mat-datepicker-toggle> 
            <mat-datepicker #picker></mat-datepicker> 
        <h4>Basic mat-select</h4> 
            <select matNativeControl required> 
                <option value="volvo">Volvo</option> 
                <option value="saab">Saab</option> 
                <option value="mercedes">Mercedes</option> 
                <option value="audi">Audi</option> 

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. 

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



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon