Topic
2 replies Latest Post - ‏2012-12-28T07:38:31Z by SystemAdmin
bbski
bbski
2 Posts
ACCEPTED ANSWER

Pinned topic hx:panelDialog underlay not transparent

‏2012-12-27T01:51:02Z |
We are creating dialogs using JSF's like such:

<hx:panelDialog type="modal" styleClass="CLTPanelDialog" id="globalCancelDialog" showTitleBar="false">

we have an issue where the dialog box is displayed correctly, but the underlay is completely solid and blocks the underlying page. This changed after we made some changes to our themes and skins but we are unable to determine which change affected it. What is interesting is it appears the dialog creates a temporary div (see below) that contains various parameters for the dialog. I see this div created when I click on one of the buttons on the dialog when in F12 under Chrome. I added the attribute opacity: 0.6; and saw the underlay change correctly.

<!--
<div id="HX_DLG_SCRATCH_0" name="HX_DLG_SCRATCH_0" style="z-index: -1; position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; border-width: 0px; border-style: none; padding: 0px; margin: 0px; font-size: 1px; background-color: rgb(226, 226, 226); display: none;" onmousedown="null"></div>
-->

We do have our css classes like dijitDialogUnderlay to control the underlay, but they do not appear to be used.

So, the question is how do we control the opacity/underlay for our diaglogs? Are we missing a Dojo include file possibly?

Any help is greatly appreciated.
Updated on 2012-12-28T07:38:31Z at 2012-12-28T07:38:31Z by SystemAdmin
  • bbski
    bbski
    2 Posts
    ACCEPTED ANSWER

    Re: hx:panelDialog underlay not transparent

    ‏2012-12-27T21:20:28Z  in response to bbski
    As an update, I've been able to determine why this is not working for firefox and chrome but still unsure of the solution.

    As indicated below, the temporary DIV that gets dynamically created:
    <!--
    <div id="HX_DLG_SCRATCH_0" name="HX_DLG_SCRATCH_0" style="z-index: -1; position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; border-width: 0px; border-style: none; padding: 0px; margin: 0px; font-size: 1px; background-color: rgb(226, 226, 226); display: none;" onmousedown="null"></div>
    -->

    I found is created in hxclient_core_v3_1_12.js. Here is the code snippet that is failing:
    if (o.filters) {
    o.style.filter="progid:DXImageTransform.Microsoft.Alpha(enabled=false)";
    o.filters.item("DXImageTransform.Microsoft.Alpha").opacity=50;
    o.filters.item("DXImageTransform.Microsoft.Alpha").enabled=true;
    } else if (o.style) {
    o.style.MozOpacity=.4;
    }

    For FF, we are dropping into the line o.style.MozOpacity which for newer browsers is not a supported style. Should just be o.style.opacity. I'm able to set a breakpoint at the line and verify o.style.MozOpacity is null.

    So, given this is in a library, how to overcome this issue?
    • SystemAdmin
      SystemAdmin
      6420 Posts
      ACCEPTED ANSWER

      Re: hx:panelDialog underlay not transparent

      ‏2012-12-28T07:38:31Z  in response to bbski
      First, you should know that Chrome is not a supported browser in the hx-library. Neither is Safari that is based on WebKit like Chrome. Hence, my suggestion for a long term solution is to get rid of hx-library and replace it with a properly supported alternative.

      Secondly, since you found the bad code line, you could modify it in the library. Naturally, from the maintainability perspective it is not recommendable since you will need to do the same modification every time the library is updated. However, it does not seem likely that IBM update the library anytime soon.