Rectangle Layer Problem on a Modal Dialog

Targets Web
1

I sometimes use rectangles as a simple cosmetic element to create a box around fields on a screen. I typically have been using SHEET type dialogs but because of the underlying screen layout in a recent Web App a MODAL dialog worked better to allow the user to see the underlying screen. Just cosmetic.

I built a new app about the time R3.0 was released and a few users had problems with these SHEET dialogs where the rectangle covered up some other screen elements as if it was on the top layer. I made sure that the rectangle was in the back layer (using the designer toolbar buttons) and the other labels were in the front. Because these users are geographically dispersed I could not easily look at the problem on their computers but I did see a few screen shots of essentially blank dialog boxes. Sometimes they reported that the “problem went away” and they could see the labels again on the same computer and browser.

In general the users are Windows 7 using a mix of IE, FireFox, and Chrome. I think the problem surfaced on a mix of all three browsers but I could not reproduce it on my Mac or my Windows 7 Virtual Machine on my Mac.

I tried creating a style that made the rectangles about 90% transparent to just keep the outline and that appeared to work for a while then randomly the problem returned for the same users and the rectangle seemed to be totally opaque. Most of the users did NOT report anything similar. I finally gave up and removed the rectangles.

Because this was so random and the users were geographically dispersed I have not had much luck reproducing the exact circumstances where it occurs. We were also in a time crunch to complete some data entry so I did not have much time to experiment.

I have several other apps that use SHEET type dialogs and I have not had any similar reports but most of the dialogs don’t have rectangles.

Has anybody seen any similar?

2

It sounds like the html for the dialog is not being rendered correctly, possibly from it not getting properly injected into the page. Usually closing the dialog and reopening it will correct the problem. But the only way to know if this is the problem is to get a look at the generated html on a problem system, using something like Developer Tools in Chrome or Firebug in Firefox.

3

Jay I would agree that it must be a browser rendering problem.

The fun part of debugging this is I have never seen it happen. It could be as simple as some people running IE 8 or some other older version, or an XP machine, or … or … or … Several “swear” that it was broken in IE, Chrome, and FireFox then later the problem “went away” even though I had not changed anything.

To save time my solution was to remove the rectangles.

I am going to ignore it for the moment.