ICEfaces
  1. ICEfaces
  2. ICE-7016

Enhance ace:pushButton to support embedded icon and labels, incl. label positioning

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-2.0.0.GA, 2.0.2
    • Fix Version/s: 2.1-Beta2, 3.0
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      All
    • Assignee Priority:
      P1
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      Feature Request: Enhance the ace:pushButton to support embedding both a text label and an image/icon in the clickable button area.

      - This can be achieve by rendering the button as an HTML4 <button> tag.
      - The component must support controlling the relative positioning of the image and text within the button, and the spacing between the image and the text. Omitting either image or text should also be possible. The positioning and spacing is given in CSS, and the component must support the style and styleClass attributes.
      - The button must support an actionListener etc.
      - The component must support CSS for styling, and be WAI-ARIA enabled. It must also support the tabindex attribute.

      - In addition / alternatively, the pushButton should accept a buttonFacet which could be used to specify arbitrary JSF markup as the button content.
      1. pushButtonExamples.xhtml
        2 kB
        Arturo Zambrano
      1. vertButton.png
        1 kB
      2. horizButton.png
        2 kB

        Activity

        Hide
        Ken Fyten added a comment -

        Attached example images.

        Show
        Ken Fyten added a comment - Attached example images.
        Hide
        Arturo Zambrano added a comment -

        Fixed at revision 25938.
        The ace:pushButton component now supports having children and rendering them inside the button. There's no need to use a facet. Developers have full control over the css of elements and components they put inside the button. If the label or value attributes are used, they will appear first, before the children.

        Show
        Arturo Zambrano added a comment - Fixed at revision 25938. The ace:pushButton component now supports having children and rendering them inside the button. There's no need to use a facet. Developers have full control over the css of elements and components they put inside the button. If the label or value attributes are used, they will appear first, before the children.
        Hide
        Ken Fyten added a comment -

        Please attach a sample page showing combinations of label around an image on each of the top, bottom, left, right sides.

        Show
        Ken Fyten added a comment - Please attach a sample page showing combinations of label around an image on each of the top, bottom, left, right sides.
        Hide
        Arturo Zambrano added a comment -

        attached page with examples

        Show
        Arturo Zambrano added a comment - attached page with examples

          People

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

            Dates

            • Created:
              Updated:
              Resolved: