Layering Modal Popups using CSS Z-Index

I really like the Modal Popup Extender (MPE) (see various articles here) and the “feel” that it adds to sites.  It’s useful for collecting information, changing information, or simply informing the user that something has happened.

But what happens when you need two popups at the same time?

In a recent project, I used the MPE to provide options when a user added or imported records into a system.  However, I also wanted to provide an UpdateProgress panel that would appear OVER the modal popup panel.  To do this, I needed to redefine the z-index css attributes to properly layer the controls.

My requirements were simple:

• The MPE should appear over all “pages”.
• The MPE “Backgrounds” (the BackgroundCssClass of the MPE) should appear just behind the MPE.
• The UpdateProgress and it’s background should appear over EVERYTHING else.
• The UpdateProgress and the MPEs should scroll and resize according to the browser.
• Everything must be cross-browser (of course).

UPDATE: While this works BEAUTIFULLY in IE7, IE8, FF2, and FF3–-it totally borks out in IE6.  Working on a fix now.

The Modal Popup Panel

The modal popup panel is pretty standard.  The z-index of 1000 basically puts it above most everything else on the screen.

.ModalPopupPanel

{

    z-index: 1000;

    width: 400px;

    border: solid 2px #5D7B9D;

    background-color: #F5F5DC;

    padding: 10px 10px 10px 10px;

}

The UpdateProgress Popup Panel

The UpdateProgress panel is also quite standard—a white box, border, and animated .gif image to keep users entertained during longer processes.  For this, the z-index is set outrageously high just for safety.  Remember: I want the UpdateProgress above EVERYTHING else.

.UpdateProgressPanel

{

/* UpdateProgressPanel is above EVERYTHING ELSE, even other modal popups */

       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;

      

}

The Modal Backgrounds

Behind the MPE and UpdateProgress backgrounds, you see a nice blue slate gray color, that’s handled by the ModalBackground class (the BackgroundCssClass attribute of the ModalPopupExtender control. 

.ModalBackground,

.UpdateProgressModalBackground

{

       background-color: #6D7B8D; /* Blue Slate Gray */

       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;

}

 

.ModalBackground

{

/* Just below a ModalPopupPanel */

    z-index: 999;

}

 

.UpdateProgressModalBackground

{

/* Above everything else, except an UpdateProgressPanel */

    z-index: 99999998;

}

To save some reuse, the ModalBackground and UpdateProgressModalBackground share the same attributes; however, I’ve specified the z-index separately to ensure that the UpdateProgressModalBackground appears ABOVE the regular ModalBackground. 

 

These combine to create a nice layered effect.  Now, even when a MPE is visible, the UpdateProgress still appears over it and prevents user entry.

 

 

 

 

 

Tags: ModalPopupExtender, CSS, UpdateProgress, asp.net+3.5, ajax

A lull…

As projects wind down, it’s been quite the administrative lull lately.  Projects are done and rolling out the door; paperwork is ramped up and covering my desk. :(  Hopefully, over the next few weeks, some new fun and excitement will jump in the door—including a new project involving mobile devices (yay!).

If not, maybe it’ll give me time to get back into experiment mode and kick around the new ASP.NET MVC Preview 4 and ASP.NET AJAX 4.0 Preview.  I haven’t had nearly enough time to dink at home—all this newfound housework takes a LOT of time and energy. Heh.

Tags: asp.net+mvc, asp.net+ajax, boredom

It’s going to be one of those days…

VS2008 has crashed 20+ times today.  Reboots aren’t helping.  I’m slowly uninstalling plug-ins at the moment.  Ugh.

Obviously a Monday

Tags: VS2008, Monday

AnkhSVN 2.0 Released - How’s it look?

When I first started using Subversion full time for all of my personal projects, I stuck with the VisualSVN server and AnkhSVN as a Visual Studio client.  Both were free, easy to install, and easy to use.

However, after a few weeks, the AnkhSVN client could almost be called “annoying.”  It trampled over the existing SCC plugins for SourceSafe (for work) and made a mess out of several of my project uploads.  I ended up going back to using TortioiseSVN and doing everything through Explorer.

When AnkhSVN 2.0 was released, I figured I’d give it another shot.

The site claims quite a bit—including several unique additions:

• Pending changes window; subversion status and commands available in one place
• Full support for Visual Studio 2005 and 2008; AnkhSVN is now a SCC package instead of just an addin
• Better log viewer
• Merge support
• Property editor
• AnkhSVN now supports most project types previously unsupported via the SCC api
• All solution explorer actions (rename, copy&paste, drag&drop) keep subversion history now
• Enhanced build process and setup
• Automatic check for updates
• And last but certainly not least end user documentation

All of those look great—especially the SCC package and changes window.  But how does it compare once installed?

After installation and starting up VS2008, everything looks normal.

Brief Look

Pending Changes Window

The new pending changes window is FANTASTIC—much improved over the old 1.x versions.  I did run into a snafu when trying to resize the window where the scrollbars didn’t update on the screen; however, I’m not sure if it’s a VSS or AnkhSVN issue.

SCC Package

Under Options > Source Control, AnkhSVN shows up just like it should.

What does boggle me is that all of the Subversion commands and menus are available no matter what—even when the VSS SCC is enabled.  It still has the stink of VSS and SVN trying to step on one another (“pick me! control your project with me! no, I’m better! pick me!”).

Log/History Viewer

I really like the new history viewer.  It’s clean and easy to read; however, if you change the options at the top—there doesn’t appear to be a way to “change it back” and see the history again, close the view and review.

Annoyances

• Opening a project from Subversion (File > Subversion > Open from Subversion) will open a project just fine, copy it down, but never opens it.  You have to go back and open the solution after it’s created the local structure.  Not huge, but annoying.
• When viewing history; you cannot view the history of a single file (that I’ve found) in the Repository Explorer. 

I’m still planning to give it a whirl for the next couple of weeks and see what happens.  Hopefully over a couple weeks I’ll have more time to code—it’s been a busy July so far!

Tags: AnhkSVN, Visual+Studio+2008, SCC

Catching Async Postbacks from Server Controls

In my current project, I created a custom server control that presented the user with questions and answers—they select the answer and move on.

However, a requirement was that the user could push a button and “select all”.  Unfortunately, DropDownList objects are not as easy to select as, say, a CheckBox.  In addition, all controls are dynamically generated—I knew the IDs, but couldn’t specify the Async trigger in the MasterPage’s Script Manager.

I could, however, find the name of the control and do a bit of magic with it.

Here’s how:

First, in your server control, check to see if a ScriptManager control is even present.  For this example, I’m leaving out the try/catches—so we’ll assume that it’s there.

private ScriptManager _scriptManager;

Then, in OnInit (or OnLoad, depending on your controls):

_scriptManager = ScriptManager.GetCurrent(Page);

GetCurrent fetches the current AJAX ScriptManager control from the context you specify—in this case, the current Page object.

Now we’re ready to consume the ScriptManager.  First, we ensure that it’s not null AND, most importantly, that the line of code is being hit during an Async Postback.  Regular postbacks, for the point of updating an UpdatePanel don’t matter to us.

if (_scriptManager != null && _scriptManager.IsInAsyncPostBack)

{

var fromWhere =

_scriptManager.AsyncPostBackSourceElementID;

The ScriptManager’s AsyncPostBackSourceElementID (seriously, can we get longer field names?) provides just that, a hashed heirarchy of the control that caused the Async Postback.  For this to work, it’s important to remember that you must either have ChildrenAsTriggers set to True or have explicitly registered your dynamic control with the ScriptManager.

The hashed output looks like the standard ASP.NET control heirarchy:

ctl00_pbph_tc_ctl01_selectallbutton_123

In this case, when I dynamically created my button, I named it “selectallbutton_{id}” to make it easy to find AND store the information I need in this Select All step.

if (fromWhere.Contains(“selectallbutton_”))

       {

var id =

fromWhere

.Substring(fromWhere.IndexOf(‘_’) + 1)

.ConvertTo<int>();

       MyMethod(id);

}

The full code block looks like:

_scriptManager = ScriptManager.GetCurrent(Page);

if (_scriptManager != null && _scriptManager.IsInAsyncPostBack)

{

var fromWhere =

_scriptManager.AsyncPostBackSourceElementID;

 

       if (fromWhere.Contains(“selectallbutton_”))

       {

var id =

fromWhere

.Substring(fromWhere.IndexOf(‘_’) + 1)

.ConvertTo<int>();

       MyMethod(id);

}

}

Now my dynamically created button’s Click event is caught during the Async postback (inside an UpdatePanel), validated, and my custom method is executed—in this event, taking the “id” that was part of the Button’s ID and modifying other controls on the page accordingly.

Tags: AJAX, asp.net+3.5, c#, ScriptManager, Async

Wrapping TabPanel Tabs With A Simple CSS Change

The last few weeks have been filled with taking an old ASP legacy application and updating it to ASP.NET.  Fun stuff and not to challenging.

However, a “feature” of the AJAX Control Toolkit’s TabContainer finally hit a nerve.  In the past, I’ve ignored the fact that I couldn’t “wrap” the tabs or set how many rows of tabs to create.  I chalked it up to an annoyance and designed applications with this in mind.

After hunting through the Control Toolkit’s source code, the problem is simple.  There’s a line in the CSS explicitly telling it not to wrap.

Well, recompiling the toolkit can get annoying and hurts mobility of your applications—it’s no fun to bundle “custom” copies for a simple styling change.

.ajax__tab_header

{

    white-space: normal !important;

}

That will override the nowrap that is built into the Toolkit’s CSS.

Hopefully, someday, this will be a boolean property on the TabContainer control.

Tags: AJAX+Control+Toolkit, TabPanel, TabContainer

Ready for ReSharper 4.0.1 Nightly Builds?

I swear that they don’t sleep at JetBrains.  Sleep is good! 

Fresh off of ReSharper 4.0’s great EAP and full release, they’re hard at work for ReSharper 4.0.1.  According to Confluence, there’s already been almost 220 bug fixes (as per build 907). 

As usual, caution should be used when evaluating an EAP product (e.g. not on your one-and-only production workstation), but it looks like another great opportunity to kick in some feedback for ReSharper.

You can find the nightly builds here.

Tags: ReSharper, JetBrains

ReSharper 4.0 - Cool Features

There are quite a few new features to ReSharper 4.0 that are great, but it’s the little things that really can impress and speed up usage.  A few of my favorites are below.

camelHumps.

ReSharper now supports Go To > and statement completion according to camel casing.  If you’re like me, you tend to write normal sentences in camel case—it’s just habit.

Using the camel casing, it picks up the variable I just created, not the class.

Lambda support.

I’ve become addicted to the simplicity of lambdas—they express intent and you can read them like sentences.  ReSharper 4 does an excellent job of digging into the anonymous type and pulling up IntelliSense information.

ResponseChoicesController()

.SelectOne(x =>

x.IsDefault &&

x.ResponseTypeId == responseTypeId)

From the ResponseChoicesController, select one that meets the requirements that IsDefault is true and ResponseTypeId is equal to the specified responseTypeId.  To me, and I’m sure I’m odd, that is easier to read than the “written” LINQ code.

Convert Static to Extension.

This is FANTASTIC for revamping existing code to take full advantage of the .NET 3.5 Framework.  I’ve been working on a project the past few weeks to migrate a .NET 2.0 project using Enterprise Library 3 up to 3.5 and LINQ-to-SQL and this addition has been fantastic to move data and business logic into controllers and the LINQ data context.

 

Tags: ReSharper, Visual+Studio+2008

ReSharper 4.0 Released!

Finally, after quite a long wait and an exciting EAP period, ReSharper has been dubbed “done” by the guys and gals at JetBrains.

• Download here.
• Download the new VS scheme keymap here.

So far, so good on this side.  I’ve kept up-to-date almost every release on my production machine and rarely ran into any issues.

Now, to talk the bosses into upgrading!

Tags: Visual+Studio+2008, JetBrains, ReSharper

Deep Copy Cloning of LINQ Entity Objects - Not Deep Enough

Yesterday, I wrote about a great IL solution to deep copying LINQ objects.  Unfortunately, it’s not quite deep enough.

The problem lies in the entity sets related to LINQ objects.  For example, in what I’m working on, the Report object contains Marks (grades) based on a foreign key relationship.  The previously discussed IL cloning method copies the records, but because it doesn’t generate new primary keys for those, it throws:

“An attempt has been made to Attach or Add an entity that is not new, perhaps having been loaded from another DataContext.  This is not supported.”

I’ve tried zeroing out the PK fields just as I did with the report object iself—no dice.  Removing the Marks (by setting them equal to either null or new EntitySet<Mark>()) and no dice.

The only way I think I can get around it would be to break the FK relationship, clone the report (which would return a new Id), and then copy each of the Marks objects separately with some sort of loop (similar to below):

foreach (var mark in

new MarksController().SelectAll(oldReport.Id))

{

var newMark = new Mark {

              IndicatorId = mark.IndicatorId,

ReportId = newReport.Id,

             ResponseChoiceId = mark.ResponseChoiceId

});

}

That defeats the purpose though… ugh.

Back to the drawing board!

Tags: LINQ, Clone, Entity, c#, IL