Laurens Montanaro Laurens Montanaro -4 years ago 88
TypeScript Question

mdTooltip and mdDialog broken in an md-grid-list

I'm fairly new to Angular and have been working on a project using Angular Material library. I have encountered some strange behavior when using mdTooltip and mdDialog requests within an md-grid-list, and I was wondering what the cause of it is.

Essentially, when hovering over a tooltip or attempting to call a dialog on an md-grid-tile element of an md-grid-list, they do not close. In the case of the dialog, the background opacity will revert to normal but the dialog content will remain on the page.

I altered an Angular startup plunker and was able to recreate this bug, as you can see here:
https://embed.plnkr.co/8zbydmXP3PkTrmft0G0A/

The interesting thing is that (as you can see in the plunk) I've added a separate button which calls the openDialog method, and even that doesn't work. However! if I remove the md-grid-list tags entirely from the plunk, it does! You can see this behavior for yourself at the link.

I'm not sure what is going on and very new to Angular and Material, so all advice is appreciated. Thanks!

Answer Source

I can make your plunker work by adding 'cols="3"' to both grid lists :-)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download