IE8 Modal Problem with Dialog

[tshuba]

Hello,

I have an environment where we're using IBM's RAD 7.5 along with their flavor of JSF 1.2, Tiles, and PrimeFaces 0.9.0 deployed to a WebSphere 7 server. When attempting to to render a page and popup a modal dialog, the entire page goes "modal" along with the dialog box and nothing is selectable. This only seems to happen with IE8. The same page does work correctly with Mozilla. Any assistance or things to try would be greatly appreciated.

One other item to note:
- the page does have multiple forms (in case that matters)

Thanks,
Tony

[cagatay.civici]

Hi Tony, can you test the modal dialog at the following page with ie8?

http://developer.yahoo.com/yui/examples ... clean.html

How does it behave?

[tshuba]

Hi Cagatay -

Yes, as I'd expect it works fine. I can even create a basic page with my own environment where it works fine with IE8. I believe it's a problem where something is used in combination with the modal dialog, but I haven't been able to figure out what combination causes the problem. I've used the straight YUI in the past without issue. Unfortunately I'm not at a point where I can have you hit the actual page, but I could post some/all of the source if you think it would help.

[cagatay.civici]

Hi, can you post what p:resources renders? Also do you have other primefaces components?

How does the modal dialog in following link work?

http://97.107.138.40:8080/prime-showcase/ui/dialog.jsf

[tshuba]

Hi, that works as well.

I am not currently using any other primefaces components. Here is the rendered text from p:resources:

<script type="text/javascript" src="/IBNR/primefaces_resources/0.9.0/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="/IBNR/primefaces_resources/0.9.0/primefaces/core/core.js"></script>
<link rel="stylesheet" type="text/css" href="/IBNR/primefaces_resources/0.9.0/yui/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="/IBNR/primefaces_resources/0.9.0/yui/container/container-min.js"></script>

Also, I receive the following lines on the console of my App Server:
[8/4/09 10:07:54:946 EDT] 00000019 SystemOut O 10:07:54.930 [WebContainer : 0] DEBUG o.p.ui.resource.ResourceServlet - Streaming resource '/META-INF/resources/yui/utilities/utilities.js'
[8/4/09 10:07:54:946 EDT] 00000019 SystemOut O 10:07:54.946 [WebContainer : 0] DEBUG o.p.ui.resource.ResourceServlet - Resource '/META-INF/resources/yui/utilities/utilities.js' streamed succesfully
[8/4/09 10:07:54:946 EDT] 0000001c SystemOut O 10:07:54.930 [WebContainer : 2] DEBUG o.p.ui.resource.ResourceServlet - Streaming resource '/META-INF/resources/yui/container/container-min.js'
[8/4/09 10:07:54:946 EDT] 0000001c SystemOut O 10:07:54.946 [WebContainer : 2] DEBUG o.p.ui.resource.ResourceServlet - Resource '/META-INF/resources/yui/container/container-min.js' streamed succesfully
[8/4/09 10:07:54:946 EDT] 00000024 SystemOut O 10:07:54.930 [WebContainer : 6] DEBUG o.p.ui.resource.ResourceServlet - Streaming resource '/META-INF/resources/primefaces/core/core.js'
[8/4/09 10:07:54:946 EDT] 00000024 SystemOut O 10:07:54.946 [WebContainer : 6] DEBUG o.p.ui.resource.ResourceServlet - Resource '/META-INF/resources/primefaces/core/core.js' streamed succesfully
[8/4/09 10:07:54:946 EDT] 00000022 SystemOut O 10:07:54.930 [WebContainer : 4] DEBUG o.p.ui.resource.ResourceServlet - Streaming resource '/META-INF/resources/yui/container/assets/skins/sam/container.css'
[8/4/09 10:07:54:946 EDT] 00000022 SystemOut O 10:07:54.946 [WebContainer : 4] DEBUG o.p.ui.resource.ResourceServlet - Resource '/META-INF/resources/yui/container/assets/skins/sam/container.css' streamed succesfully
[8/4/09 10:07:56:461 EDT] 00000021 SystemOut O 10:07:56.461 [WebContainer : 3] DEBUG o.p.ui.resource.ResourceServlet - Streaming resource '/META-INF/resources/yui/assets/skins/sam/sprite.png'
[8/4/09 10:07:56:461 EDT] 00000021 SystemOut O 10:07:56.461 [WebContainer : 3] DEBUG o.p.ui.resource.ResourceServlet - Resource '/META-INF/resources/yui/assets/skins/sam/sprite.png' streamed succesfully

[tshuba]

I was finally able to determine the cause of this unwanted behavior.

As I said in my original post, I am using JSF with Tiles. With that, we have several embedded page fragments. Those work fine and don't appear to be any problem, however many of them do contain <DIV> blocks within other <DIV> blocks. I had unknowingly placed my p:Dialog fragment within these cascaded <DIV>s and was receiving the modal problem. My understanding is that IE8 and Mozilla/FF handle this layering differently. Perhaps I could have solved my problem by using specific z-indexes on the <DIV>, but I was able to solve the problem by moving the p:Dialog fragment outside the cascaded <DIV>s and placed it simply below the <BODY> tag. This seems to resolve the problem with IE8.

I don't believe this to be a problem with primefaces at all, but simply a layering issue with YUI.

[cagatay.civici]

This is really weird, modal dialog in online demo works for you with ie8 but locally it fails. Can you please post a simple page of yours with p:dialog modal="true" in it?