Not able to open dialog popups and CSS positioning also not working

swiety85 / angular2gridster

Angular implementation of well known Gridster (no jQuery, no external libraries, only Angular and Rx.js).

https://swiety85.github.io/angular2gridster/

MIT License

203 stars 75 forks source link

Not able to open dialog popups and CSS positioning also not working #366

Closed Rgsmani closed 4 years ago

Rgsmani commented 4 years ago

Hi, I need to have a dialog popup in each Gridster Item. When I'm trying to open a popup, it's opening within Gridster item itself. I need to open a popup to window size and

The CSS Positioning of the elements is also not working. It should come out of the Gridster Item. Please help to resolve this.

Here is my link: https://stackblitz.com/edit/angular9-gridster

swiety85 commented 4 years ago

There are several problems:

gridster item has overflow: hidden
modal use top:0, bottom: 0, left:0, right:0 that stretch but to the parent (relative/absolute) element that is GridsterItem
Since the Gridster items are all placed in the same container with position absolute and the same zIndex content of one GridsterItem can cover the Modal the is displayed by another item.

I would suggest a modal with append to body option.