Rather than update the post from yesterday, this chaos deserves it’s own post.
Yesterday, I discussed layering Modal Popup Extenders with the Update Progress controls. In IE7, FF3, and, well, most everything except IE6, it works like a champ as-is.
The “bug”? After quite a bit of research, the problem revolves around the following issues:
- lack of support for the { position: fixed } property,
- lack of support for the { right; bottom} properties,
- … unreliable suport for {height: 100%, width: 100% } properties,
- general pain and suffering
- <SELECT> tags (or ASP:DropDownList objects) exist above any other z-index,
I’m sure there were other issues. Really.
After spending a good part of the day trying code, looking it up on QuirksMode, and trying again, I have somewhat of a solution; however, I still greatly dislike how it works in IE6.
On the MasterPage, I have a single UpdateProgress that isn’t associated to a specific UpdatePanel. Therefore, it’ll catch all Async postbacks (and I only have ONE UpdateProgress control).
<asp:UpdateProgress
runat=”server” DisplayAfter=”100″ ID=”UpdateProgress”>
<ProgressTemplate>
<div class=”UpdateProgressModalBackground”></div>
<div class=”UpdateProgressPanel”>
<h3>Please wait…</h3>
<img src=”Images/ajaxbar.gif”
alt=”Please wait…”
style=”text-align: center; width: 100%; height: 10px;“ />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
This, again, references our UpdateProgressModalBackground and UpdateProgressPanel styles. These two styles are unchanged from the post yesterday. Here they are again for reference:
/* UpdateProgressPanel is above EVERYTHING ELSE,
even other modal popups */
.UpdateProgressPanel
{
z-index: 99999999;
background-color:#fff;
color:#fff;
width: 200px;
text-align: center;
vertical-align: middle;
position: fixed;
bottom: 50%;
left: 45%;
padding: 10px;
border: solid 2px #5D7B9D;
}
.UpdateProgressModalBackground
{
z-index: 99999998;
background-color: #6D7B8D;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
filter: alpha(opacity=50);
opacity: 0.5;
-moz-opacity: 0.5;
}
The UpdateProgress and these two classes work just fine in IE7+, FF2+. So, now to fix IE6..
So, what’s the difference in IE6? Well, we can’t use the positioning attributes in the above classes–-they won’t work properly.
Issue #1 – Fitting the Popup and Background Without Positioning Attributes
Searching the web, I found an article by Damien White discussing his his same pains with this. His solution involved using the IE-specific CSS “expressions” to calculate the height and width of the window.
height:
expression(
document.documentElement.scrollTop +
document.documentElement.clientHeight + “px”);
width: expression(document.body.clientWidth + “px”);
However, at least for me, Damien’s expressions wouldn’t handle scrolling down the page.
Damien explains:
The thinking behind this was to take the window height (which document.documentElement.clientHeight gives us) and then add the scroll top position, which will give us the upper portion if the user scrolls up. The problem shows itself when the user scrolls down; that area is not covered. The good thing about this is that I didn’t need to mess with the body height, but the solution isn’t optimal in the long haul.
That’s a bad deal because that’s the whole point! Reading a bit more, there was a comment from Kunal Mukherjee on Damien’s post that solved the problem.
Kunal’s expressions looked at the scrollHeight of the window as compared to the offsetHeight and returned the larger.
height: expression(
document.body.scrollHeight > document.body.offsetHeight
? document.body.scrollHeight
: document.body.offsetHeight + ‘px’ );
Actually, that works really well. Cool.
Finally, I’d recommend, as Damien did, breaking out your CSS into two files—one for “IE6” and one for everyone else. This is easily done using the IE-specific conditional statements.
<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”App_Themes/ie6/ie6.css” />
<![endif]–>
I also included !important flags on each of the properties in the ie6.css file—just to be safe.
Issue #2 – IE6 Pushes <SELECT> tags above everything else…
This is where the solution gets dicey; however, I’m relying on Kunal’s solution again. In his comment, he pointed out a way to hide <SELECT> tags in IE6 without causing the disappearing act that the ModalPopupExtender causes—cover them with an IFRAME.
To me, this hack seems… sketchy at best, but it works.
In the ProgressTemplate of the UpdateProgress control, add in the IFRAME.
<iframe id=”UpdateProgressHideSelect”></iframe>
In the default.css (or the non-ie6.css, whatever you’ve called it), I recommend setting the iframe’s style to {display: none}—it isn’t needed outside IE6, don’t render it. 
On the ie6.css, add the UpdateProgressHideSelect in—along with another expression to place the iframe over the entire page (like the standard BackgroundCssClass of a ModalPopupExtender):
#UpdateProgressHideSelect
{
z-index: 15000;
position: fixed;
top: 0;
left: 0;
background-color: #fff;
border: none;
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height: 100%;
width: 100%;
display: inline !important;
}
* html #UpdateProgressHideSelect
{
position: absolute;
height: expression(
document.body.scrollHeight > document.body.offsetHeight
? document.body.scrollHeight
: document.body.offsetHeight + ‘px’);
}
The z-index of 15000 for the iframe ensures that it appears above the normal 10000 of a ModalPopupExtender panel; however, under our crazy high UpdateProgress control.
Problem solved—for now.
Here’s how they look, side by side.
FireFox 3:
Nice and clean, properly centered given the size of the box and window size. Can see drop down lists and MPE behind the UpdateProgress, but cannot access them.
IE 7:
Output as expected and where expected. Can see drop down lists and MPE behind the UpdateProgress, but cannot access them.
IE 6:
Output as expected—basically where expected. Drop down lists are hidden behind the IFRAME to prevent input. Other controls are visible, including the MPE, but behind the background.
What fun!
