ICEfaces
  1. ICEfaces
  2. ICE-10696

Add "headerAlign" attribute to ace:panel

    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
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      Ideally the ace:panel component would have a "headerAlign" attribute (with options of left, center, right) to automatically style the text defined by the "header" attribute. Currently styling the header is a bit counter-intuitive and tough for a developer because of how the component renders.
      1. header-old.png
        11 kB
      2. header-new.png
        11 kB

        Activity

        Hide
        Arturo Zambrano added a comment - - edited

        r45792: added "headerAlign" attribute to ace:panel.

        Show
        Arturo Zambrano added a comment - - edited r45792: added "headerAlign" attribute to ace:panel.
        Hide
        Carlo Guglielmin added a comment -

        I'm seeing a new width issue since r45792.

        "header-old.png" is the live version of Emporium, which was built July 21st (before the headerAlign patch).
        "header-new.png" is from the current trunk from July 27th.

        As you can see the new header doesn't wrap properly. This is without specifying headerAlign at all. From the CSS it looks like a hardcoded inline style attribute was added to the <span> around the header text, and it has a "width: 99%" that seems to mess up the alignment, specifically:
        <span style="display: table-cell; text-align: left; width: 99%;" class="ui-panel-title">Application Settings</span>
        This was with Firefox 39 on Linux.

        Can we get the header wrapping fixed? Also can we try to avoid using inline styling in our components since it's very hard to override from a developer point of view.

        Show
        Carlo Guglielmin added a comment - I'm seeing a new width issue since r45792. "header-old.png" is the live version of Emporium, which was built July 21st (before the headerAlign patch). "header-new.png" is from the current trunk from July 27th. As you can see the new header doesn't wrap properly. This is without specifying headerAlign at all. From the CSS it looks like a hardcoded inline style attribute was added to the <span> around the header text, and it has a "width: 99%" that seems to mess up the alignment, specifically: <span style="display: table-cell; text-align: left; width: 99%;" class="ui-panel-title">Application Settings</span> This was with Firefox 39 on Linux. Can we get the header wrapping fixed? Also can we try to avoid using inline styling in our components since it's very hard to override from a developer point of view.
        Hide
        Arturo Zambrano added a comment -

        r45794: fix for the text alignment issues when the panel has no buttons and the alignment issue when using the header facet; also moved styling required for this feature to CSS classes.

        The issues occurred when the panel had no buttons. This has been fixed now. All the new styling is required for this feature to work, including the 99% width, which is part of a technique to make the left span use all the remaining space. This is not supposed to be overridden, but it was moved to CSS classes anyway.

        Show
        Arturo Zambrano added a comment - r45794: fix for the text alignment issues when the panel has no buttons and the alignment issue when using the header facet; also moved styling required for this feature to CSS classes. The issues occurred when the panel had no buttons. This has been fixed now. All the new styling is required for this feature to work, including the 99% width, which is part of a technique to make the left span use all the remaining space. This is not supposed to be overridden, but it was moved to CSS classes anyway.

          People

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

            Dates

            • Created:
              Updated:
              Resolved: