Stack Overflow
Stack Overflow

Questions tagged [react-grid-layout]

A draggable and resizable grid layout with responsive breakpoints, for React.

162 questions
3
votes
0 answers

Drag and Drop to wrapped flex items using react

I have to create a drag and drop functionalities to some dynamically created list items just like the image below: Here the, items will be displayed by using flex and items will be wrapped by flex-wrap: wrap so that it adjust the items into multi…
ninja
  • 167
  • 2
  • 12
3
votes
1 answer

Fixing Layout by Removing Spaces of React Grid Layout When Set Compact Type Null

I am using react-grid-layout package for my layout design. I want to use compactType=null configuration for free items moving on the layout. But when I change the sizes or move items in a row, large gaps appear on the screen as in the screen…
Mehmet
  • 1,467
  • 1
  • 14
  • 19
3
votes
3 answers

React grid layout custom resize handle is not working

According to React-Grid-Layout doc resizeHandle?: ReactElement | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef) => ReactElement) can be used to implement custom resize handle for the grid items. In my case this is not…
sravis
  • 3,562
  • 6
  • 36
  • 73
3
votes
1 answer

How to render custom placeholder in react-grid-layout

Is there any way how to render custom placeholder (red item) in react-grid-layout? I would like to render for example some in this red placeholder. I didn't found any informations about this in official docs…
vimov32802
  • 89
  • 2
  • 5
3
votes
2 answers

How can re-render react-grid-layout column's width on parent's resizing?

I have a dashboard panel using react js that I used react-grid-layout in it; I used react-grid-layout in my content and that works correctly but when I close my right side or left side panels (drawers) , the width of my content that is the parent of…
N.SH
  • 616
  • 7
  • 20
3
votes
1 answer

React-Grid-Layout elements handle jumps if there are other elements in the app root in react app

My React-Grid-Layout elements handle jumps if there are other elements in the app root in my react app. If I remove the navbar component above the responsive grid layout I am able to click and drag properly, otherwise, when I try to click on the…
Ganesh Kumar
  • 93
  • 1
  • 12
3
votes
0 answers

React Grid Layout not updating height

I have one RGL component in my application. It is rendered correctly but when I add some content in Grid item then the content overflows the grid item. It is not pushing the Grid item to increase the height also I tried after updating h component in…
Rahul
  • 5,594
  • 7
  • 38
  • 92
3
votes
1 answer

Initial positioning of grid-items in react-grid-layout is randomly generated

Here is the code which I am using for generating react-grid-layout. What I am trying to achieve here is a dynamic dashboard which is configurable and can be resized and dragged as well. On initial render I am trying for the dashboard cards to…
A.K.47
  • 237
  • 2
  • 12
3
votes
1 answer

Dragging Child grid layout tends to drag the parent grid layout as well

I am using React Grid Layout https://github.com/STRML/react-grid-layout . And working with it in such a way that i need to create a draggable parent div along with a draggable child div. The divisions works perfect, but i need to implement that…
Himanshu Gera
  • 159
  • 1
  • 1
  • 7
3
votes
0 answers

use react-grid-layout multiple times in one another

Is there a way to use multiple react-grid-layout components in one another? I use this: https://github.com/STRML/react-grid-layout Or can I define a specific anchor to drag the items? Thanks
Felix
  • 5,452
  • 12
  • 68
  • 163
3
votes
1 answer

draggableCancel on react-grid-layout

I am using react grid layout with amcharts3-react everything is just fine, I can move elements around but, this time I can't use amcarts Zoom handles... They are draggable as well.I tried to use grid layout's cancelDraggable feature but nothing…
beratuslu
  • 1,101
  • 3
  • 14
  • 27
3
votes
2 answers

Scroll Not Working: react-grid-layout: 0-showcase example

I'm trying to replicate the 0-showcase example of react-grid-layout, everything is working fine except that, the main HTML element which contains the grid and its components, isn't scrollable. I've tried giving overflow-y scroll to body and to…
Arihant
  • 477
  • 4
  • 18
3
votes
1 answer

react-grid-layout example Unknown prop `_grid` on

I'm trying to implement react-grid-layout. All of the examples pass the grid item configuration through a _grid div property: createElement(el) { ... return (
...
); }, In my…
Csaba Toth
  • 10,021
  • 5
  • 75
  • 121
2
votes
1 answer

How to increase transform y value when an item is hovered in react-grid-layout

How can I increase transform Y value when an item is hovered in react-grid-layout? When I use the developer tool to see elements style, I see transform: translate(X, Y). X and Y value is determined by react-grid-layout and I don't have a control for…
Happy1234
  • 537
  • 3
  • 15
2
votes
0 answers

Target specific element of react-grid-layout onDrag

I'm trying to add/remove the class on the grid items of the grid layout that I'm dragging but it affects all the elements instead of the one I drag on and I don't know how to avoid that. Here is my code: const [isActive, setIsActive] =…
Yohav Rn
  • 159
  • 1
  • 11
1
2
3
…
10 11