This is a migrated thread and some comments may be shown as answers.

KendoUI dialog with missing close icon

1 Answer 1296 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Chau
Top achievements
Rank 1
Chau asked on 14 Mar 2019, 02:36 AM

I am using the DialogService to open a help dialog popup at runtime. It seems to work fine, except the close 'X' icon of the dialog disappears after a certain testing pattern.

The dialog initially displays OK with the close 'X' icon at the upper right corner of the dialog. After I clicked on a toggle switch button to hide and show different components on the page, then the same help dialog would open with a missing close 'X' icon at the top right corner. From then on, any dialog popup would no longer show a close 'X' icon to close the dialog. Pressing ESC only would close the dialog. 

I think there may be some css conflict that caused the close icon to not display, but I can't figure it out.

When capturing the HTML of the dialog titlebar in both cases, the HTML difference shows there are tags ::before and ::after for the dialog instance that shows the close icon.

Can you tell me how to force the close 'X' icon to display on the dialog?

Thanks!

1 Answer, 1 is accepted

Sort by
0
Svet
Telerik team
answered on 15 Mar 2019, 12:11 PM
Hi Chau,

Thank you for the demonstrated screenshots and details.

However, I am not sure what causes the undesired behavior from the provided information.

In general, if we use the default service configuration to open a new Dialog or we pass the title, content, and actions as a single component for the Dialog the close icon is present on the screen. The close icon can be missing from the TitleBar of the Dialog only if we do not use a <kendo-dialog-titlebar> component at all when we use a single component to represent the Dialog. Check the following example demonstrating the three cases:
https://stackblitz.com/edit/angular-3bakxr?file=app%2Fapp.component.ts

In case further assistance is required for this case, could you provide some more details about the use case scenario or point me in the right direction so that I can reproduce the issue. Thank you in advance. 

Regards,
Svetlin
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Chau
Top achievements
Rank 1
Answers by
Svet
Telerik team
Share this question
or