ICEfaces
  1. ICEfaces
  2. ICE-4700

Modal popup with auto resizable width

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.8.1
    • Fix Version/s: 1.8.2-RC1, 1.8.2
    • Component/s: None
    • Labels:
      None
    • Environment:
      Icefaces 1.8.1 from trunk

      Description

      In current modal popup resizable attribute probably not works.
      Also popup width must be defined because this component can't auto resize own width.

      In attachment is an easy solution tested on IE6/7/8 & FF2/3.
      Now width attribute for popup is not neccesary. Modal width is based on it's content.
      It is very usable for message boxes with variable length user messages .

      Patch of PanelPopupRenderer.java

      131 table.setAttribute(HTML.CELLSPACING_ATTR, "0");
      132> table.setAttribute(HTML.WIDTH_ATTR, "100%");
      < // table.setAttribute(HTML.WIDTH_ATTR, "100%"); delete global 100% width
      133 rootDiv.appendChild(table);

      187 headerTd.setAttribute(HTML.ID_ATTR, handleId);
      < headerTd.setAttribute(HTML.STYLE_ATTR, "width:100%;"); // add 100% to header
      188 headerTr.appendChild(headerTd);
      Element headerTdSpacer = domContext.createElement(HTML.TD_ELEM);
      Element headerDiv = domContext.createElement("div");
      < headerDiv.setAttribute(HTML.STYLE_ATTR, "width:1px;"); //create spacer extension to change table mode
      < headerDiv.setAttribute("class", "icePnlPopHdr");
      < headerTdSpacer.appendChild(headerDiv);
      < headerTr.appendChild(headerTdSpacer);
      189 // add header facet to header tr and add to table
      1. PanelPopupRenderer.java
        16 kB
        Krashan Brahmanjara
      1. ScreenHunter_01.jpg
        219 kB
      2. ScreenHunter_02.jpg
        230 kB
      3. ScreenHunter_03.jpg
        139 kB

        Activity

        Hide
        Krashan Brahmanjara added a comment -

        PopupRenderer with width patch.

        Show
        Krashan Brahmanjara added a comment - PopupRenderer with width patch.
        Hide
        Ken Fyten added a comment -

        Please review this user contribution and commit the changes if appropriate.

        Show
        Ken Fyten added a comment - Please review this user contribution and commit the changes if appropriate.
        Hide
        yip.ng added a comment -

        Works in FF3. (Actually works in FF3 even without patch? Try removing width with Firebug in live demo.) Doesn't work in IE7. See attached screenshots.

        Show
        yip.ng added a comment - Works in FF3. (Actually works in FF3 even without patch? Try removing width with Firebug in live demo.) Doesn't work in IE7. See attached screenshots.
        Hide
        Krashan Brahmanjara added a comment -

        OK. On another system I see effect similar to screenHunter_02.jpg.
        It looks like line
        < headerTd.setAttribute(HTML.STYLE_ATTR, "width:100%;"); // add 100% to header
        is not necesary.

        I will check other cases.

        Show
        Krashan Brahmanjara added a comment - OK. On another system I see effect similar to screenHunter_02.jpg. It looks like line < headerTd.setAttribute(HTML.STYLE_ATTR, "width:100%;"); // add 100% to header is not necesary. I will check other cases.
        Hide
        yip.ng added a comment -

        Patch applied and committed. See screenshot 03 for result in IE7.

        Show
        yip.ng added a comment - Patch applied and committed. See screenshot 03 for result in IE7.
        Hide
        Krashan Brahmanjara added a comment - - edited

        It will need more investigation.
        For backward compability better solution is not remove 100% from heder.

        Intresting results are with 100% patch and width=0 instead null width

        BTW
        Some fixes

        192 headerDiv.setAttribute(HTML.STYLE_ATTR, "width:1px;");
        > headerDiv.setAttribute("class", "icePnlPopHdr");
        < headerTdSpacer.setAttribute("class", "icePnlPopHdr");
        194 headerTdSpacer.appendChild(headerDiv);

        213 bodyTr.appendChild(bodyTd);
        < bodyTd.setAttribute(HTML.COLSPAN_ATTR, "2");
        214 // add body facet to body tr then add to table
        215 table.appendChild(bodyTr);

        232 footerTd.setAttribute(HTML.STYLE_CLASS_ATTR, "panelPopupFooter");
        < bodyTd.setAttribute(HTML.COLSPAN_ATTR, "2");
        233 Element img = domContext.createElement(HTML.IMG_ELEM);

        Show
        Krashan Brahmanjara added a comment - - edited It will need more investigation. For backward compability better solution is not remove 100% from heder. Intresting results are with 100% patch and width=0 instead null width BTW Some fixes 192 headerDiv.setAttribute(HTML.STYLE_ATTR, "width:1px;"); > headerDiv.setAttribute("class", "icePnlPopHdr"); < headerTdSpacer.setAttribute("class", "icePnlPopHdr"); 194 headerTdSpacer.appendChild(headerDiv); 213 bodyTr.appendChild(bodyTd); < bodyTd.setAttribute(HTML.COLSPAN_ATTR, "2"); 214 // add body facet to body tr then add to table 215 table.appendChild(bodyTr); 232 footerTd.setAttribute(HTML.STYLE_CLASS_ATTR, "panelPopupFooter"); < bodyTd.setAttribute(HTML.COLSPAN_ATTR, "2"); 233 Element img = domContext.createElement(HTML.IMG_ELEM);
        Hide
        yip.ng added a comment -

        Changes applied.

        Show
        yip.ng added a comment - Changes applied.

          People

          • Assignee:
            yip.ng
            Reporter:
            Krashan Brahmanjara
          • Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: