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. Java Source File
              PanelPopupRenderer.java
              16 kB
              Krashan Brahmanjara
            1. ScreenHunter_03.jpg
              139 kB
            2. ScreenHunter_02.jpg
              230 kB
            3. ScreenHunter_01.jpg
              219 kB

              Activity

              Descending order - Click to sort in ascending order
              Ken Fyten made changes -
              Status Resolved [ 5 ] Closed [ 6 ]
              Assignee Priority P3
              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
              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
              Ken Fyten made changes -
              Fix Version/s 1.8.2-RC1 [ 10210 ]
              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
              Hide
              Permalink
              yip.ng added a comment -

              Changes applied.

              Show
              yip.ng added a comment - Changes applied.
              yip.ng made changes -
              Status Reopened [ 4 ] Resolved [ 5 ]
              Resolution Fixed [ 1 ]
              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 -
              Resolution Fixed [ 1 ]
              Status Resolved [ 5 ] Reopened [ 4 ]
              Hide
              Permalink
              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 -
              Status Open [ 1 ] Resolved [ 5 ]
              Resolution Fixed [ 1 ]
              Hide
              Permalink
              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 -
              Attachment ScreenHunter_03.jpg [ 11847 ]
              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
              Hide
              Permalink
              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
              Permalink
              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.
              yip.ng made changes -
              Attachment ScreenHunter_01.jpg [ 11845 ]
              Attachment ScreenHunter_02.jpg [ 11846 ]
              Ken Fyten made changes -
              Salesforce Case []
              Fix Version/s 1.8.2 [ 10190 ]
              Assignee Priority P3
              Assignee Yip Ng [ yip.ng ]
              Hide
              Permalink
              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.
              Krashan Brahmanjara made changes -
              Field Original Value New Value
              Attachment PanelPopupRenderer.java [ 11839 ]
              Hide
              Permalink
              Krashan Brahmanjara added a comment -

              PopupRenderer with width patch.

              Show
              Krashan Brahmanjara added a comment - PopupRenderer with width patch.
              Krashan Brahmanjara created issue -

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved: