Last post Apr 30, 2007 03:10 PM by zootius
Apr 27, 2007 03:20 PM|zootius|LINK
Hi folks - been banging my head against a problem and just can't seem to solve it. You'll probably need to understand a bit about z-Index stacking contexts to help me out.
I created a funky popup menu control that appears at the mouse pointer location on mouseclick. To implement my control on an ASPX page, the user just puts my tag into their ASPX/ASCX code. At the server side, my control is then rendered at that point of
the HTML as a hidden, absolutely positioned DIV with a massive z-Index. On the client side, when the user clicks, the DIV is set to display:block and positioned to the mouse cursor. Fine.
The massive z-Index of my popup means it will behave correctly in the stacking context of the HTML element in which it was created, but not other stacking contexts on the page. Therefore my popup appears underneath pretty much any other positioned element
that follows its' stacking context in the markup, e.g. any positioned div at document root level.
You would probably argue that the problem stems from creating the popup DIV inline within a stacking context in the first place. I thought this too - I don't think there would be a problem if I could create the popup DIV at root level - preferably as the
last DIV on the page. Unfortunately when I try to alter the Page's control tree from my User Control using "this.Page.Controls.Add(divMyPopupDiv)" it gives me an error about not being able to modify the page control tree during Init, Load, and Render ... basically
I think it just doesn't want to allow a user control to modify its parents control collection ever.
So can any of you good people help? :)
Apr 27, 2007 04:14 PM|JoshStodola|LINK
Hmmm, it should appear on top of everything.
Post some code, please. It would be especially nice to see the rendered output.
Apr 30, 2007 08:54 AM|zootius|LINK
Okay, stick the following code into a blank web form:
<div id="elemMain" style="width: 600px; height: 600px; border: solid 1px black; background-color: #aaa;">
<div id="elemBlue" style="width: 100px; height: 100px; position:absolute; top: 50px; left: 50px; border: solid 1px #00a; background-color: #aaf;">
<div id="elemTarget" style="z-index:10; top: 40px; left: 30px; position:absolute; border: solid 1px green; background-color: #afa;">
<div id="elemRed" style="width: 100px; height: 100px; position: absolute; top: 100px; left: 100px; border: solid 1px red; background-color: #faa;">
As you can see, due to the use of positioned elements (which my web form has to use), elemTarget is created in the same stacking context as elemBlue. elemTarget has a high z-Index specified, but because it is not in the same stacking context as elemRed,
it appears BEHIND elemRed - simply because elemRed follows elemBlue in the HTML document and therefore appears at a higher default z-Index. Now you can see my problem - if you think of elemTarget as being my popup menu UserControl, you can imagine a developer
instantiating it inline in the ASPX file, e.g. within elemBlue. That brings me back to the wish to control the location of the control creation using "Page.Controls.Add()" - but that brings up the "modification" error I reported above.
Apr 30, 2007 02:32 PM|zootius|LINK
var elemPopup = $('<%= pnlPopup.ClientID %>');
Even though this fixed the problem, I'd still like to know if anyone knows a way to do this server-side. Or is it impossible for a child control to manipulate its parent's control tree?
Apr 30, 2007 02:35 PM|JoshStodola|LINK
Apr 30, 2007 03:10 PM|zootius|LINK