ICEfaces
  1. ICEfaces
  2. ICE-4674

Add focus support to the panelCollapsible component

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.8.2-RC1
    • Fix Version/s: 1.8.2
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      panelCollapsible + focus

      Description

      Add focus support to the panelCollapsible component

        Issue Links

          Activity

          Hide
          Adnan Durrani added a comment -

          Fixed:

          Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js
          Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\panelcollapsible\PanelCollapsibleRenderer.java
          Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\panelcollapsible\PanelCollapsibleRenderer.java
          Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js
          Completed: At revision: 19035

          Show
          Adnan Durrani added a comment - Fixed: Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\panelcollapsible\PanelCollapsibleRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\panelcollapsible\PanelCollapsibleRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js Completed: At revision: 19035
          Hide
          Joanne Bai added a comment -

          Tested successfully using component showcase JSP on trunk revision 19035 + Tomcat6 + FF3

          IE7 and IE8 has styling problem displaying the collapsible title bars (see the attached screen shot).

          Show
          Joanne Bai added a comment - Tested successfully using component showcase JSP on trunk revision 19035 + Tomcat6 + FF3 IE7 and IE8 has styling problem displaying the collapsible title bars (see the attached screen shot).
          Hide
          Adnan Durrani added a comment -

          The styling problem has been fixed under the following JIRA: ICE-4738

          Show
          Adnan Durrani added a comment - The styling problem has been fixed under the following JIRA: ICE-4738
          Hide
          Ken Fyten added a comment -

          I've noticed that when the panelCollapsible header gets focus, the focus indicator is displayed in the browser. This is causing the header contents to shift 1 pixel because of the indicator. It would be nicer if the contents didn't shift when the focus ind. is displayed.

          Video: http://screencast.com/t/w7587OFUZNQY

          Show
          Ken Fyten added a comment - I've noticed that when the panelCollapsible header gets focus, the focus indicator is displayed in the browser. This is causing the header contents to shift 1 pixel because of the indicator. It would be nicer if the contents didn't shift when the focus ind. is displayed. Video: http://screencast.com/t/w7587OFUZNQY
          Hide
          yip.ng added a comment -

          The focus mechanism is simulated by modifying the borders of the header. This affects the header's dimensions and thus the flow and layout of the page. I have tried various positioning approaches. No luck. Because the shift is caused by the appearance and disappearance of the simulated focus border itself, repositioning the header and/or content div before or after the fact won't help much. It also introduces a lot of complexity associated with positioning.

          If we use hide and redisplay, there will be flickering and you will still see the shift if you pay close attention.

          What's more, in at least one case the behavior of IE is different from FF. So even if we could find some approach that works there may still also be cross-browser headaches to deal with.

          Show
          yip.ng added a comment - The focus mechanism is simulated by modifying the borders of the header. This affects the header's dimensions and thus the flow and layout of the page. I have tried various positioning approaches. No luck. Because the shift is caused by the appearance and disappearance of the simulated focus border itself, repositioning the header and/or content div before or after the fact won't help much. It also introduces a lot of complexity associated with positioning. If we use hide and redisplay, there will be flickering and you will still see the shift if you pay close attention. What's more, in at least one case the behavior of IE is different from FF. So even if we could find some approach that works there may still also be cross-browser headaches to deal with.
          Hide
          Adnan Durrani added a comment -

          Resizing and clipping has been fixed.

          Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js
          Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\panelcollapsible\PanelCollapsibleRenderer.java
          Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\core\src\com\icesoft\faces\resources\css\rime\rime.css
          Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\samples\component-showcase\common-web\css\showcase_style.css
          Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\panelcollapsible\PanelCollapsibleRenderer.java
          Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js
          Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\core\src\com\icesoft\faces\resources\css\rime\rime.css
          Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\samples\component-showcase\common-web\css\showcase_style.css
          Completed: At revision: 19313

          Show
          Adnan Durrani added a comment - Resizing and clipping has been fixed. Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\panelcollapsible\PanelCollapsibleRenderer.java Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\core\src\com\icesoft\faces\resources\css\rime\rime.css Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\samples\component-showcase\common-web\css\showcase_style.css Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\panelcollapsible\PanelCollapsibleRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\core\src\com\icesoft\faces\resources\css\rime\rime.css Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\samples\component-showcase\common-web\css\showcase_style.css Completed: At revision: 19313
          Hide
          Joanne Bai added a comment -

          Tested on ICEfaces trunk revision 19313
          Server: Tomcat 6.0
          Browsers: FF3.5, IE7

          panelCollapisble related test cases as follows are all PASS:

          ICE-4674
          ICE-4059
          ICE-2193
          ICE-2146
          ICE-1882
          ICE-1816

          Show
          Joanne Bai added a comment - Tested on ICEfaces trunk revision 19313 Server: Tomcat 6.0 Browsers: FF3.5, IE7 panelCollapisble related test cases as follows are all PASS: ICE-4674 ICE-4059 ICE-2193 ICE-2146 ICE-1882 ICE-1816
          Hide
          Krashan Brahmanjara added a comment -

          File PanelCollapsibleRenderer.java updated with revision 19313 changed some views in IE browsers.
          In complex pages with collapisble panel unexpected bottom scrollbar appears.

          The problem is in line 79 with content
          div.setAttribute(HTML.STYLE_ATTR, "padding:1px;background-image:none;width:100%;");

          padding 0px resolve scrollbars problem.

          Patch

          Index: PanelCollapsibleRenderer.java
          ===================================================================
          — PanelCollapsibleRenderer.java (revision 20162)
          +++ PanelCollapsibleRenderer.java (working copy)
          @@ -76,7 +76,7 @@
          panelCollapsible.isExpanded()+"'; " +
          "iceSubmit(document.forms['"+ form.getClientId(facesContext) +"'],this,event); return false;");
          Element div = domContext.createElement(HTML.DIV_ELEM);

          • div.setAttribute(HTML.STYLE_ATTR, "padding:1px;background-image:none;width:100%;");
            + div.setAttribute(HTML.STYLE_ATTR, "padding:0px;background-image:none;width:100%;");
            header.appendChild(div);
            //this anchor should be known by the component only, so we are defining style to the component level
            Element anchor = domContext.createElement(HTML.ANCHOR_ELEM);
          Show
          Krashan Brahmanjara added a comment - File PanelCollapsibleRenderer.java updated with revision 19313 changed some views in IE browsers. In complex pages with collapisble panel unexpected bottom scrollbar appears. The problem is in line 79 with content div.setAttribute(HTML.STYLE_ATTR, "padding:1px;background-image:none;width:100%;"); padding 0px resolve scrollbars problem. Patch Index: PanelCollapsibleRenderer.java =================================================================== — PanelCollapsibleRenderer.java (revision 20162) +++ PanelCollapsibleRenderer.java (working copy) @@ -76,7 +76,7 @@ panelCollapsible.isExpanded()+"'; " + "iceSubmit(document.forms ['"+ form.getClientId(facesContext) +"'] ,this,event); return false;"); Element div = domContext.createElement(HTML.DIV_ELEM); div.setAttribute(HTML.STYLE_ATTR, "padding:1px;background-image:none;width:100%;"); + div.setAttribute(HTML.STYLE_ATTR, "padding:0px;background-image:none;width:100%;"); header.appendChild(div); //this anchor should be known by the component only, so we are defining style to the component level Element anchor = domContext.createElement(HTML.ANCHOR_ELEM);

            People

            • Assignee:
              Adnan Durrani
              Reporter:
              Adnan Durrani
            • Votes:
              1 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: