Position Fixed (Bootstrap Modals/Dropdowns) does not work inside gridster-item due totransform: translate3d property.

[GuppuBoss]

Hi... I am having problem while adding a dropdown or modal within a gridster item. When i add a bootstrap Modal which is position fixed. It remains inside the gridster-item block. And when i add a dropdown down inside gridster item. and dropdown item height increases more than gridster item. It hides the remaining part of dropdown. I am trying to give a menu/property option to the dropped component. If someone has solution Please let me know

Stackover flow issue regarding this CSS conflict https://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform

[tiberiuzuld]

Hi @GuppuBoss , The problem can be fixed by position or overflow. Either of them cannot be perfect in all cases. The items are positioned absolute so ... that's how it will work. You can try to put a scroll to your item/dropdown

[Rgsmani]

Hi, I'm also facing the same issue. 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 alone to window size and

The CSS Positioning of the elements( position or overflow) is also not working. It should come out of the Gridster Item.

The Issue is due to The Property transform: translate3d property. is introduced in the newer version.

Please help to resolve this.

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

[MuthuD]

I'm facing this issue as well, Team any suggestion would be appreciated :)

I'm placing my widgets inside gridster-item and each widget has a configuration dialog to be shown on top of the page. But the dialog stuck's inside the gridster-item. This is one of a critical feature we need, Can you guys please help me on this.

Thanks in advance

MuthuD

[ikendra]

I have precisely the same issue/question (angular 9.1.1, angular-gridster2 9.1.0)..

[ArkasDev]

Same issue. I have removed the overflow: initial so that the dropdown menu can be displayed outside of the gridster item. Even though the z-index is higher, the dropdown menu is not displayed above the gridster items.

[h4de5]

Same here - looking forward a CSS way to handle this.

[scarletcloak]

Does somebody has solved this?

[epiphanizer]

What you need to do is to have the helper element somewhere outside of the Gridster component. Ideally high up in the hierarchy. It can be a reusable component. Now, call it with a subscription to a service, have it be a high-level object in the window. At initiatialization time, set the location based on wherever the user input / cursor is. I have found this to be by far the best way.

[Smekalin]

I had the similar problem with Shoelace dropdown and hoist property didn't work for me. I had dropdown offset because of transform property on grid item ;(

https://github.com/tiberiuzuld/angular-gridster2/blob/master/projects/angular-gridster2/src/lib/gridsterConfig.constant.ts#L49 - this property resolve my problem