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

        Hide
        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.
        Hide
        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
        Hide
        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).
        Hide
        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.
        Hide
        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
        Hide
        Arturo Zambrano added a comment -

        r46063: fix for console error message

        Show
        Arturo Zambrano added a comment - r46063: fix for console error message
        Hide
        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.

          People

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

            Dates

            • Created:
              Updated:
              Resolved: