React-grid-layout: Z-index is not working

[Pardeep94]

I am working with this grid layout and I also use react-date-picker for calendar.
I need to change z-index of react grid layout because it cover my calendar but I am able to do it.
I also do it with changing z-index of calendar and also by changing z-index of grid layout but nothing is working.

[rockyhuber]

I have the same problem! Although from what I've read z-Index will not solve this issue as it doesn't work between the parent and the child component.

[rockyhuber]

Mine will also not enable me to click on the color picker that overlap on the same grid box that fired the color picker. If I click on a color off the the grid box that fires the event, then it will select.

[rockyhuber]

[rockyhuber]

I got mine to display properly, however I still cant click on the swatches anywhere on the blue grid. I can click the color swatch on the items which are off the blue grid area.

So I set the zIndex of the
<GridLayout style={{zIndex:'0'}} ...

Then for the grid boxes I applied a zIndex of -1
<div style={{zIndex:'-1'}} key="b">

No idea why this works, but it does. Everything still moves as it should, except for the problem of not being able to click on the orange, yellow, light green, green, light blue, blue and gray swatches

[Pardeep94]

your solution is also not working in my case

[mmesar]

Try with useCSSTransforms={false} grid property. worked for me.

[MrToph]

This happens because the grid items create a new stacking context and you use the color picker as a _child_ of that grid item.

@mmesar 's answer works because then it does not use transform property anymore, which previously created the stacking context.
This fixes the issue but the documentation says that it's about 6x slower now.

[mmesar]

@MrToph I know the mechanics of my solution and what are tradeoffs, just wanted to point out quick and easy solution, as for the slowness, I don't think it is such an issue, IMHO most of the time users aren't resizing and moving frames in the grid, once they configure their view they stick with it and interact with functionalities inside grid items

[mishravinay112]

@mmesar I tried to useCSSTransforms grid property but it is not working for me.

[mmesar]

@mishravinay112
did u set any overflow property on grid item? let's not play guessing game :) can you provide some code?

[mishravinay112]

@mmesar thanks for the prompt reply. here is the code:

export default class RenderComponent extends React.Component {
constructor(props) {
super(props);
this.state={
data: {},
propsData: {},
}
this.onLayoutChange = this.onLayoutChange.bind(this);
}

render() {
    const data = this.state.data;
    return (
        <div className="grid chrPad-left-right chrGutter-horizontal--xs">
            {
               data.length &&
                  <GridLayout
                        className="layout"
                                    useCSSTransforms={false}
                                    cols={12}
                                    layout={this.props.layout}
                                    onLayoutChange={this.onLayoutChange}
                                    rowHeight={30}
                                    width={1405}
                                    style={{zIndex:'0'}}
                                    >
                            {data.map((element,index) => {
                            return(
                            <div style={{zIndex:'-1'}} key={index} className='content-border'>
                                {element.displayType==="MAP" &&
                                  <MapContainer  element={element}/>
                                }
                                {element.displayType==="CHART" &&
                                  <ChartContainer /*dimension={elementHeight}*/ element={element}/>
                                }
                                {element.displayType==="STATS" &&
                                  <StatsContainer element={element} id={index} /*dimension={elementHeight}*//>
                                }
                                {element.displayType==="TABLE" &&
                                  <DataTableHandler data={element}/>
                                }
                            </div>
                            )


                            })}
                        </GridLayout>


            }

        </div>
    );
}

onLayoutChange(layout) {
    this.props.onLayoutChange(layout);
}

componentWillReceiveProps(nextProps) {
    console.log(nextProps.data)

    this.setState({
        data: nextProps.data,
        propsData: nextProps.propsToPass
    })
}

}

@mmesar let me know if you need more information regarding this. Thanks!

[mmesar]

@mishravinay112
You just solved half of my project problems m8. Cos I figured somethings out.

First of all lose zIndex properties on GridLayout and div enclosing your containers (MapContainer, ChartContainer, StatsContainer, DataTableHandler ) and put your useCSSTransforms to false. Things should work then.

OR (and that is what i just figured out).
put your useCSSTransforms to true and keep your zIndex: 0 on GridLayout and your zIndex: -1 on enclosing container that has dropdown and put zIndex: -2 on all other enclosing containers that dont have dropdown menu. Or if every enclosing div has dropdown menu every following enclosing div should have zIndex one point lower (so first enclosing div -1, second -2. third -3 and so on). There are drawbacks tho, some divs and their dropdown menus will always be over divs that are after them.

For me, only some grid items have dropdown menus and this is perfect for my implementation. For you, if you have dropdown menus in every grid item this may or maynot be satisfactory.

Anyways, first solution should work.

I hope I helped.

@MrToph - what are your thoughts on this

[Pardeep94]

I solved my problem by giving z-index to parent div.
Thank you everyone for giving me your precious time.

[MicheleDolce11]

Hi all, I had the similar problem of @mishravinay112 , I had a lot of grid items with the dropdown so I set on CSS this:
.react-grid-item:hover{
z-index: 10;
}
This is a good solution only if is not necessary that the dropdown remains in foreground also when not hovering the grid item

[dheerajsuthar]

Hi all, I had the similar problem of @mishravinay112 , I had a lot of grid items with the dropdown so I set on CSS this:
.react-grid-item:hover{
z-index: 10;
}
This is a good solution only if is not necessary that the dropdown remains in foreground also when not hovering the grid item

worked like charm :) Thanks @MicheleDolce11