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

        Krashan Brahmanjara created issue -
        Hide
        Krashan Brahmanjara added a comment -

        PopupRenderer with width patch.

        Show
        Krashan Brahmanjara added a comment - PopupRenderer with width patch.
        Krashan Brahmanjara made changes -
        Field Original Value New Value
        Attachment PanelPopupRenderer.java [ 11839 ]
        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.
        Ken Fyten made changes -
        Salesforce Case []
        Fix Version/s 1.8.2 [ 10190 ]
        Assignee Priority P3
        Assignee Yip Ng [ yip.ng ]
        yip.ng made changes -
        Attachment ScreenHunter_01.jpg [ 11845 ]
        Attachment ScreenHunter_02.jpg [ 11846 ]
        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.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #19058 Tue Jul 14 13:33:09 MDT 2009 yip.ng ICE-4700
        Changed to allow width of modal popup to be dynamic based on the width of the contents.
        Files Changed
        Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java
        yip.ng made changes -
        Attachment ScreenHunter_03.jpg [ 11847 ]
        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.
        yip.ng made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        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);
        yip.ng made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #19091 Mon Jul 20 15:47:13 MDT 2009 yip.ng ICE-4700
        Changed to allow width of modal popup to be dynamic based on the width of the contents.
        Files Changed
        Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java
        yip.ng made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Hide
        yip.ng added a comment -

        Changes applied.

        Show
        yip.ng added a comment - Changes applied.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #19148 Mon Aug 10 16:30:58 MDT 2009 yip.ng ICE-4700, ICE-4710
        Fixed popup appearing too wide in IE.
        Files Changed
        Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java
        Ken Fyten made changes -
        Fix Version/s 1.8.2-RC1 [ 10210 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #19578 Mon Nov 02 14:24:44 MST 2009 yip.ng ICE-5062,ICE-4700: Added missing style class for column header.
        Files Changed
        Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #19949 Thu Dec 10 15:45:41 MST 2009 judy.guglielmin ICE-4481, update PanelPopup for ICE-5062, ICE-4778, ICE-4781, ICE-4700, ICE-4710, ICE-4578, ICE-4595, ICE-4475, ICE-3356, ICE-4495,ICE-4450
        Files Changed
        Commit graph MODIFY /icefaces/scratchpads/glimmer/compat/components/src/main/java/com/icesoft/faces/component/panelpopup/PanelPopup.java
        Commit graph MODIFY /icefaces/scratchpads/glimmer/compat/component-metadata/src/main/resources/conf/ice_cust_properties/cust-panelpopup-props.xml
        Commit graph MODIFY /icefaces/scratchpads/glimmer/compat/core/src/main/resources/META-INF/resources/ice-extras.js
        Commit graph MODIFY /icefaces/scratchpads/glimmer/compat/components/src/main/java/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java
        Commit graph MODIFY /icefaces/scratchpads/glimmer/compat/components/src/main/java/com/icesoft/faces/component/outputconnectionstatus/OutputConnectionStatusRenderer.java
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]
        Assignee Priority P3

          People

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

            Dates

            • Created:
              Updated:
              Resolved: