This discussion is archived
5 Replies Latest reply: Nov 13, 2012 12:56 PM by AmandaWalsh RSS

Theme 25 Modal Region - not displaying correctly in IE8

AmandaWalsh Explorer
Currently Being Moderated
I have an application I have developed, which makes use of the modal regions which display a small form in a modal region when the user clicks a button.
I am having problems with how it is displayed in IE8. I have many users in my organisation who still use IE8 so I need to find a fix.

I have installed one of the 'packaged applications' on apex.oracle.com and converted the theme from 101 to Theme 25 to demonstrate the issue (ignore the fact that the buttons have had a different template to the "+" and ">").

http://apex.oracle.com/pls/apex/f?p=65955:14
Login as: matt/matt

Click on any of the "Add xx" buttons, e.g. "Add Update".

You will see that the colour of the region is black and you can't see the modal box. This makes the text very hard to read, and not really useable.

I have been trying to figure out which css style controls the background (to potentially put a fix in the HTML header of my page) but I cannot figure out how to fix it.

Any guidance would be appreciated!
Amanda.
  • 1. Re: Theme 25 Modal Region - not displaying correctly in IE8
    Jeff E Expert
    Currently Being Moderated
    try the following css style which is basically a copy from 4_1.css which is referenced in the 101 theme:
    section.modalOn{z-index:10001;position:fixed;top:20%;left:50%;margin-left:-300px;width:800px;border:1px solid #666}
  • 2. Re: Theme 25 Modal Region - not displaying correctly in IE8
    ShakeebR Explorer
    Currently Being Moderated
    Hi Amanda,

    This may be a bug in Theme 25 for IE8, and I will investigate this issue further. However, for now, it seems like there are two issues. First, being that the background of the page becomes completely black wh en the modal is loaded when it should really be somewhat transparent. To fix this, you can add the following CSS:

    div#modalBackground { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    }


    The second issue is that the modal appears to be behind the background, so you are unable to see it. Try adding the following styles and see if it can fix the issue:

    section.uModalRegion {
    z-index: 1000;
    }

    Unfortunately, I was unable to reproduce the second issue on my VM (IE9 running in IE8 mode).

    Best,
    Shakeeb
  • 3. Re: Theme 25 Modal Region - not displaying correctly in IE8
    AmandaWalsh Explorer
    Currently Being Moderated
    Hey Shakeeb,

    Yep I got the opacity working nicely yesterday using:
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

    This works nicely.

    I am still having trouble with the background of the modal section.
    Applying the z-index did not seem to make a difference.
    The text, fields and buttons seem to be on top - but its just the colour of the modal box.

    Been playing around with turning some elements of the css on/off:
    https://picasaweb.google.com/104459804528712563956/APEXModalTransparencyIssue

    If I turn this off:

    section.modalRegion{
    display: none;
    }

    It turns on another modal region and displays the background properly?


    Amanda.
  • 4. Re: Theme 25 Modal Region - not displaying correctly in IE8
    ShakeebR Explorer
    Currently Being Moderated
    Hi Amanda,

    I think I've figured out the bug. Can you add the following CSS to your application:
    section.modalOn {
      display: block !important;
    }
    This should force the modal to appear properly.

    I've added this bug to our bug system so we can try to resolve for the next release / patch of APEX.

    Best,
    Shakeeb
  • 5. Re: Theme 25 Modal Region - not displaying correctly in IE8
    AmandaWalsh Explorer
    Currently Being Moderated
    Excellent, all fixed!
    My business users will be very happy!

    The world would still be a better place without IE...

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points