search

tiberiuzuld / angular-gridster2

Angular gridster 2
https://tiberiuzuld.github.io/angular-gridster2
MIT License
1.27k stars 378 forks source link

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

Open GuppuBoss opened 5 years ago

GuppuBoss commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

ArkasDev commented 4 years ago

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.

awdawd

h4de5 commented 3 years ago

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

scarletcloak commented 2 years ago

Does somebody has solved this?

epiphanizer commented 2 years ago

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 commented 2 years ago

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