ICEfaces
  1. ICEfaces
  2. ICE-1192

popup calendar doesn't cover the underlying select boxes in IE

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.5.1
    • Fix Version/s: 1.6DR#4, 1.6
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      Operating System: Windows XP
      Platform: PC

      Description

      due to an infamous IE bug (not properly obeying z-index rules for select boxes)
      our popup calendar (like all other popup we use) doesn't cover underlying select
      boxes on IE6. a forum member provided this patch:
      http://www.icefaces.org/JForum/posts/list/0/2475.page#15953

      .iceCalIFrameFix {
         z-index: -1;
         position: absolute;
         display: block;
         filter: mask();
       }

      Index:
      component/src/com/icesoft/faces/component/selectinputdate/SelectInputDateRenderer.java
      ===================================================================
      ---
      component/src/com/icesoft/faces/component/selectinputdate/SelectInputDateRenderer.java
      (revision 424)
      +++
      component/src/com/icesoft/faces/component/selectinputdate/SelectInputDateRenderer.java
      (revision 426)
      @@ -226,13 +226,14 @@
                               .setAttribute(HTML.ID_ATTR, clientId + CALENDAR_POPUP);
                       calendarDiv.setAttribute(HTML.NAME_ATTR,
                                                clientId + CALENDAR_POPUP);
      - calendarDiv.setAttribute(HTML.STYLE_ELEM,
      - "display:none;position:absolute; ");
      + calendarDiv.setAttribute(HTML.STYLE_ATTR,
      +
      "display:none;position:absolute;overflow:hidden;");
                       Element table = domContext.createElement(HTML.TABLE_ELEM);
                       table.setAttribute(HTML.ID_ATTR, clientId + CALENDAR_TABLE);
                       table.setAttribute(HTML.NAME_ATTR, clientId + CALENDAR_TABLE);
                       table.setAttribute(HTML.CLASS_ATTR,
                                          selectInputDate.getCalendarOutlineClass());
      + table.setAttribute(HTML.STYLE_ATTR, "position:absolute;");
                       table.setAttribute(HTML.CELLPADDING_ATTR, "0");
                       table.setAttribute(HTML.CELLSPACING_ATTR, "0");
                       // set mouse events on table ICE-369
      @@ -243,6 +244,8 @@
                       String mouseMove = selectInputDate.getOnmousemove();
                       table.setAttribute(HTML.ONMOUSEMOVE_ATTR, mouseMove);
                       calendarDiv.appendChild(table);
      + Text iframe = domContext.createTextNode("<!--[if lte IE
      6.5]><iframe class=\"iceCalIFrameFix\"></iframe><![endif]-->");
      + calendarDiv.appendChild(iframe);
                       root.appendChild(calendarDiv);
                       // render a hidden field to manage the popup state; visible ||
      hidden
                       FormRenderer.addHiddenField(facesContext, getHiddenFieldName(

        Activity

        Hide
        Adnan Durrani added a comment -

        Suggested patch has been applied. -revision 13656.

        More detail on this infamous bug can be found at the following location:
        http://www.hedgerwow.com/360/bugs/css-select-free.html

        Show
        Adnan Durrani added a comment - Suggested patch has been applied. -revision 13656. More detail on this infamous bug can be found at the following location: http://www.hedgerwow.com/360/bugs/css-select-free.html
        Hide
        Krashan Brahmanjara added a comment -

        On revision 16158 and code from trunk http://anonsvn.icefaces.org/repo/icefaces/trunk/iceface
        the problem was still not fixed.

        In attachment I add my patch of xp.css that resolve that problem.
        In png file is a view from IE 6 without my patch.

        Correct style is

        .iceSelInpDateIFrameFix, .iceIEIFrameFix

        { display:none;/*sorry for IE5*/ display/**/:block;/*sorry for IE5*/ position:absolute;/*must have*/ top:0;/*must have*/ left:0;/*must have*/ z-index:-1;/*must have*/ filter:mask();/*must have*/ height:200px;/*must have for any big value*/ }

        Height 200px better covers hidden view

        Show
        Krashan Brahmanjara added a comment - On revision 16158 and code from trunk http://anonsvn.icefaces.org/repo/icefaces/trunk/iceface the problem was still not fixed. In attachment I add my patch of xp.css that resolve that problem. In png file is a view from IE 6 without my patch. Correct style is .iceSelInpDateIFrameFix, .iceIEIFrameFix { display:none;/*sorry for IE5*/ display/**/:block;/*sorry for IE5*/ position:absolute;/*must have*/ top:0;/*must have*/ left:0;/*must have*/ z-index:-1;/*must have*/ filter:mask();/*must have*/ height:200px;/*must have for any big value*/ } Height 200px better covers hidden view
        Hide
        M R added a comment -

        This issue still does not seem to be fixed in Version 1.8.1

        Show
        M R added a comment - This issue still does not seem to be fixed in Version 1.8.1
        Hide
        Joanne Bai added a comment -

        QA tested this issue successfully on IE6 against ICEfaces trunk revision 19147 - issue no longer exists.

        Test app was checked into repo\qa\trunk\Regression\ICE-1192

        Show
        Joanne Bai added a comment - QA tested this issue successfully on IE6 against ICEfaces trunk revision 19147 - issue no longer exists. Test app was checked into repo\qa\trunk\Regression\ ICE-1192

          People

          • Assignee:
            Unassigned
            Reporter:
            Philip Breau
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: