I have a <div> on my page header that users can pop-up. This works fine except now that I've added the web grid to the page, the pop-up is sliding underneath the grid. I've tried setting the z-index of the <div> very high but that doesn't seem to make any difference. Is there any way to make sure that the WebGrid doesn't insist that it be the top layer in the page?
Hi,
I had the problem before as well. You have to modify the z-index of the frame of the grid and also of your popup.
In my stylesheet I have.
.gridFrame{z-index:1;}
.popUp{z-index:101;}
This works for me so hopefully it will help you.
Amy
Looks Like I spoke too soon. The screenshot here illustrates the problem.
When the grid frame z-index is set to -1 the <div> comes up on top of the grid (which is what I need), but for whatever reason this also disables the filter icons on the header row of the grid; the cursor does not change to a hand when the mousepointer hovers over it and the filter list menu does not pop up when the filter icon is clicked.
If I change the z-index value of the grid to 1, the filter icons on the header are once again responsive, but the <div> reverts to displaying behind the grid.
I'm not using filters on our grid so that is not an issue for us.
What z-index did you apply to your pop up window? I'm not sure what the default z-index is on DIV elements but if it is 1 then that explains why it isn't working. Try setting the z-index on the pop up to a higher number so it shows up on top.
I hope that helps. Good luck.
Amy,
>>Try setting the z-index on the pop up to a higher number so it shows up on top.<<
Thanks for the response, but I wish it was that easy...the z-index on the <div> is (and always has been) set to 100. I even tried it with 1000, but it still didn't work. This is definitely a bug in the way the grid interacts with the other elements in the browser window. I've submitted an "issue" to tech support. Guess I'll have to see what they say.