Details
-
Type: Bug
-
Status: Closed
-
Priority: Major
-
Resolution: Fixed
-
Affects Version/s: 3.0.1, EE-3.0.0.GA
-
Fix Version/s: 3.2
-
Component/s: ACE-Components
-
Labels:None
-
Environment:Chrome. Firefox, Internet Explorer. Tomcat 7, ICEfaces 3.0.1
-
Assignee Priority:P2
Description
styleClass and style for ace:PushButton is not applied properly across different browsers.
To reproduce add the following CSS class to our showcase:
.testStyle
{
background-color: red;
letter-spacing: 5px;
}
You will notice that:
1. In Chrome only background-color is applied.
2. IE& FF display both styles.
Screenshot demonstrating this is attached.
To reproduce add the following CSS class to our showcase:
.testStyle
{
background-color: red;
letter-spacing: 5px;
}
You will notice that:
1. In Chrome only background-color is applied.
2. IE& FF display both styles.
Screenshot demonstrating this is attached.
Issue Links
- depends on
-
ICE-8171 Implement resource ordering based on declared resource interdependencies
- Closed
I tested this outside the showcase and could reproduce the issue. Then, I tested this on a plain HTML page (attached) and I could see the issue as well. This seems to be related to how Chrome handles certain properties, like 'letter-spacing'. Then, I applied the 'letter-spacing' property to the <button> element and I could see the property being applied on the text. I tried this with the <span> inside the <button> element and the property was applied correctly as well. So, since the ace:pushButton component can have nested components, you could simply nest an <h:outputText /> inside and apply the 'letter-spacing' property to it, either via a styleClass or the style attribute.
Note: there was a change to apply the styleClass to the <button> element itself (
ICE-7377), but this was later undone by (ICE-7615).