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.
Thanks, that got me most of the way there. For anyone else looking for this solution in the future, they should also know that in order for the
{z-index:-1;}
to work you also need to add
{postion:absolute;}
to the frame style.