ICEfaces
  1. ICEfaces
  2. ICE-10512

Fluid layout in ace:selectMenu and ace:comboBox

          Details

          • Type: Improvement Improvement
          • Status: Closed
          • Priority: Major Major
          • Resolution: Fixed
          • Affects Version/s: 4.0
          • Fix Version/s: 4.1
          • Component/s: ACE-Components
          • Labels:
            None
          • Environment:
            Any
          • Assignee Priority:
            P1

            Description

            The ace:selectMenu and ace:comboBox components have been using a rigid/fixed layout to place their value fields and down-arrow buttons, resulting in having to determine the heights and widths of these parts with specific pixel dimensions. When using a font size larger than the normal one, the down-arrow button may look disproportionately smaller or narrower. This, in part, has been due to the use of Themeroller icons, which have specific dimensions. After ICE-10486 and ICE-10483, this has been changed to use a Font Awesome character instead, so the size of the down-arrow button is proportional to the font size. It is no longer necessary to calculate specific heights in pixels for these components. However, a specific width in pixels is still being calculated for the value fields. This improvement is to find a way to not have the need to set a specific width and thus have a more fluid layout that easily adjusts to other styling factors.

              Activity

              Ascending order - Click to sort in descending order
              Arturo Zambrano created issue -
              Arturo Zambrano made changes -
              Field Original Value New Value
              Assignee Arturo Zambrano [ artzambrano ]
              Ken Fyten made changes -
              Fix Version/s 4.1 [ 11375 ]
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #45799 Tue Jul 28 14:18:40 MDT 2015 art.zambrano ICE-10512 modified the ace:selectMenu and ace:comboBox layouts to make them more fluid and to avoid having to calculate rigid widths and heights for their internal nodes
              Files Changed
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/combobox/combobox.js
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/combobox/combobox.css
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.css
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/combobox/ComboBoxRenderer.java
              Hide
              Permalink
              Arturo Zambrano added a comment -

              r45799: modified the ace:selectMenu and ace:comboBox layouts to make them more fluid and to avoid having to calculate rigid widths and heights for their internal nodes.

              Show
              Arturo Zambrano added a comment - r45799: modified the ace:selectMenu and ace:comboBox layouts to make them more fluid and to avoid having to calculate rigid widths and heights for their internal nodes.
              Ken Fyten made changes -
              Workaround Description Need to add a documentation compatibility note regarding this change affecting any customer CSS styling applied to these components.
              Affects Documentation (User Guide, Ref. Guide, etc.),Compatibility/Configuration [ 10003, 10002 ]
              Ken Fyten made changes -
              Workaround Description Need to add a documentation compatibility note regarding this change affecting any customer CSS styling applied to these components.
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #45827 Thu Aug 06 13:10:15 MDT 2015 art.zambrano ICE-10512 further adjustments
              Files Changed
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuRenderer.java
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/combobox/ComboBoxRenderer.java
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #45828 Thu Aug 06 15:22:12 MDT 2015 art.zambrano ICE-10512 further adjustments
              Files Changed
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuRenderer.java
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/combobox/ComboBoxRenderer.java
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #45829 Thu Aug 06 15:23:09 MDT 2015 art.zambrano ICE-10512 styling adjustments in showcase
              Files Changed
              Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxFacet.xhtml
              Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxOverview.xhtml
              Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/ice.samples.showcase/showcase_styles.css
              Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxFiltering.xhtml
              Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxReqStyle.xhtml
              Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxIndicator.xhtml
              Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/ice.samples.showcase/override_header.css
              Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxLabel.xhtml
              Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/showcase.xhtml
              Hide
              Permalink
              Arturo Zambrano added a comment -

              r45828: committed further adjustments to ace:comboBox and ace:selectMenu, consisting primarily of applying the state CSS classes (ui-state-required, ui-state-optional, and ui-state-error) to the main value container, instead of to the innermost span or text field
              r45829: committed adjustments to showcase

              Show
              Arturo Zambrano added a comment - r45828: committed further adjustments to ace:comboBox and ace:selectMenu, consisting primarily of applying the state CSS classes (ui-state-required, ui-state-optional, and ui-state-error) to the main value container, instead of to the innermost span or text field r45829: committed adjustments to showcase
              Arturo Zambrano made changes -
              Status Open [ 1 ] Resolved [ 5 ]
              Resolution Fixed [ 1 ]
              Ken Fyten made changes -
              Comment [ Need to add a documentation compatibility note regarding this change affecting any customer CSS styling applied to these components.
              ]
              Ken Fyten made changes -
              Affects Documentation (User Guide, Ref. Guide, etc.),Compatibility/Configuration [ 10003, 10002 ]
              Hide
              Permalink
              Liana Munroe added a comment -

              Tested with ICEfaces 4 trunk r45834, Tomcat 7, FF 34, Chrome 43, IE 11, 10, 8.
              There were no issues found with either Chrome or FF browsers.
              When testing with any version of IE there is an issue with the showcase ace:selectMenu (any demo).
              To reproduce:
              In showcase open the ace:selectMenu > Overview demo. Click inside the ace:selectMenu component but not on the arrow icon. The list will open then quickly close. A subsequent click in the same manner will leave the menu open. This issue is only occurring with IE browsers and was not seen when tested with Jenkins build 1421 (July 27).

              Show
              Liana Munroe added a comment - Tested with ICEfaces 4 trunk r45834, Tomcat 7, FF 34, Chrome 43, IE 11, 10, 8. There were no issues found with either Chrome or FF browsers. When testing with any version of IE there is an issue with the showcase ace:selectMenu (any demo). To reproduce: In showcase open the ace:selectMenu > Overview demo. Click inside the ace:selectMenu component but not on the arrow icon. The list will open then quickly close. A subsequent click in the same manner will leave the menu open. This issue is only occurring with IE browsers and was not seen when tested with Jenkins build 1421 (July 27).
              Ken Fyten made changes -
              Resolution Fixed [ 1 ]
              Status Resolved [ 5 ] Reopened [ 4 ]
              Ken Fyten made changes -
              Assignee Priority P2 [ 10011 ]
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #46061 Thu Oct 01 14:22:54 MDT 2015 art.zambrano ICE-10512 fix for preventing the list from opening and quickly closing the first time the component is clicked
              Files Changed
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
              Hide
              Permalink
              Arturo Zambrano added a comment -

              r46061: fix for preventing the list from opening and quickly closing the first time the component is clicked.

              Show
              Arturo Zambrano added a comment - r46061: fix for preventing the list from opening and quickly closing the first time the component is clicked.
              Arturo Zambrano made changes -
              Status Reopened [ 4 ] Resolved [ 5 ]
              Resolution Fixed [ 1 ]
              Hide
              Permalink
              Liana Munroe added a comment -

              Tested with ICEfaces 4 trunk r46061. IE issue appears to be resolved however there is a console error now seen in all browsers when clicking inside the selectMenu (not the arrow icon).

              IE 11 - SCRIPT5009: 'e' is undefined
              File: showcase.jsf, Line: 4, Column: 308

              Chrome - Uncaught ReferenceError: e is not defined(anonymous function) @ VM159:4d.event.dispatch @ jquery.c.js.jsf?ln=icefaces.ace&v=4_1_0_151001:91d.event.add.l.handle @ jquery.c.js.jsf?ln=icefaces.ace&v=4_1_0_151001:85

              Show
              Liana Munroe added a comment - Tested with ICEfaces 4 trunk r46061. IE issue appears to be resolved however there is a console error now seen in all browsers when clicking inside the selectMenu (not the arrow icon). IE 11 - SCRIPT5009: 'e' is undefined File: showcase.jsf, Line: 4, Column: 308 Chrome - Uncaught ReferenceError: e is not defined(anonymous function) @ VM159:4d.event.dispatch @ jquery.c.js.jsf?ln=icefaces.ace&v=4_1_0_151001:91d.event.add.l.handle @ jquery.c.js.jsf?ln=icefaces.ace&v=4_1_0_151001:85
              Ken Fyten made changes -
              Resolution Fixed [ 1 ]
              Status Resolved [ 5 ] Reopened [ 4 ]
              Assignee Priority P2 [ 10011 ] P1 [ 10010 ]
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #46063 Thu Oct 01 18:08:29 MDT 2015 art.zambrano ICE-10512 fix for console error
              Files Changed
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
              Hide
              Permalink
              Arturo Zambrano added a comment -

              r46063: fix for console error message

              Show
              Arturo Zambrano added a comment - r46063: fix for console error message
              Arturo Zambrano made changes -
              Status Reopened [ 4 ] Resolved [ 5 ]
              Resolution Fixed [ 1 ]
              Hide
              Permalink
              Liana Munroe added a comment -

              Verified ICEfaces 4 trunk r46063. Tomcat 7, FF 34, IE 11, 10, 9, 8, Chrome 45.

              Show
              Liana Munroe added a comment - Verified ICEfaces 4 trunk r46063. Tomcat 7, FF 34, IE 11, 10, 9, 8, Chrome 45.
              Ken Fyten made changes -
              Status Resolved [ 5 ] Closed [ 6 ]

                People

                • Assignee:
                  Arturo Zambrano
                  Reporter:
                  Arturo Zambrano
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  3 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved: