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-new.png
              11 kB
            2. header-old.png
              11 kB

              Activity

              Ascending order - Click to sort in descending order
              Hide
              Permalink
              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
              Permalink
              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
              Permalink
              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: