Replies: 5 comments 3 replies
-
Small update. The flag on Grid Layout to disable the collision should be enough. The zIndex does not seem to be an issue: it can be controlled with a basic "onClick" function. In this next example I have:
|
Beta Was this translation helpful? Give feedback.
-
also also: items can still be dragged and resized. No sure if I can start a PR that adds the new flag but I can try :D In this example I use |
Beta Was this translation helpful? Give feedback.
-
found out there is a I don't know if adding a new prop to the GridItems, 'allowOverlap', would break any of the current functionalities in unexpected ways
|
Beta Was this translation helpful? Give feedback.
-
is this or #1470 being released to npm soon? |
Beta Was this translation helpful? Give feedback.
-
I lack the skills to create a proper PR, most I could do is document an adaptation I used in my local environment. I started this thread in the hopes that it's activity (your reactions) will motivate the author of this package to consider such a feature. |
Beta Was this translation helpful? Give feedback.
-
There are a few requests for overlapping elements #1062, #677, #373 and even some proposals to how to implement it #681.
Current project allows basic layouts to be created but for more advanced views like
picture-in-picture
it's not quite up to par. That's were overlapping elements could help.As @fedwu has found out, making elements overlap is not hard. Just bypass this function https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/utils.js#L197 or make it return
false
.That above would allow elements to overlap but to make it an useful feature we would need a way to control the z-index of grid items.
As an implementation:
Grid Layout
to tell it to not check for collisions between grid items.+
-
to increase / decrease the z-index of the target Grid Item. buttons would be similar to the 'drag to resize' icons/elements.Z-index control is discussed in #858 (tl;dr: z-index needs to be added on both Grid Layout and Grid Items).
If the items are read from an array the
+
-
buttons can bind to functions that shifts the position of current element in that array and this should control the overlapping priority without setting specific z-indexes.Could any of this work?
Beta Was this translation helpful? Give feedback.
All reactions