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_01.jpg
              219 kB
            2. ScreenHunter_02.jpg
              230 kB
            3. ScreenHunter_03.jpg
              139 kB

              Activity

              Ascending order - Click to sort in descending order
              Hide
              Permalink
              Krashan Brahmanjara added a comment -

              PopupRenderer with width patch.

              Show
              Krashan Brahmanjara added a comment - PopupRenderer with width patch.
              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.
              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.
              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 -

              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
              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);
              Hide
              Permalink
              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: