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
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
-
Activity
- All
- Comments
- History
- Activity
- Remote Attachments
- Subversion
Our client updated the SF case with the style they were using in application.
.testStyle span span button
{ padding: 0; margin: 0; }
Note that we are not really interested in the letter-spacing property. It is the margin and padding which causes problems for us.
In our application, the padding and margin always gets overridden by the component, even if our CSS files are loaded after the theme files.
>>>>>>>>>>>>>>>>>>>>>>
I was able to confirm that. And attached 3 more screenshots to demonstrate the problem.
The stylesheet that actually contains the pushButton's structural styling is combined.css. However, it is still loaded after the custom stylesheets on the page. This has been an issue for quite some time. The order in which the resources are loaded depends on the Core code. What we do from the ACE code is simply make sure that the theme.css stylesheet is loaded before anything else. Then, we let the Core/Bridge load the rest of the resources.
However, there's a workaround. Just ask them to load their custom resources inside <h:body> (and not inside <h:head>). We have done that with Williams, and their custom resources get loaded at the end, after our own required resources.
Introduced resource dependency metadata (along with resource ordering provided by ICE-8171 fix) that enforces the correct ordering of CSS resources.
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).