Details
-
Type:
Bug
-
Status: Closed
-
Priority:
Major
-
Resolution: Won't Fix
-
Affects Version/s: 3.2, EE-3.2.0.GA
-
Fix Version/s: 3.3
-
Component/s: ACE-Components
-
Labels:None
-
Environment:Tomcat 7
-
Assignee Priority:P2
-
Workaround Exists:Yes
-
Workaround Description:
Description
Once Row Selector is enabled on a datatable that overrides the ui-datatable-odd and ui-datatable-even styles such as this:
.rglrDtTb .ui-datatable-odd {
background: #F2F2F2;
border: 1px solid #999999;
}
The Row Selector does not apply the style properly. This is what I see in Firebug:
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, .ui-state-active em {
CROSSED OUT (OVERRIDEN) FROM HERE
background: url("/AMPS_Repository/javax.faces.resource/themes/sam/images/sprite.png.jsf?ln=icefaces.ace") repeat-x scroll left -1400px padding-box #2647A0;
border: 1px solid #AAAAAA;
TO HERE. FOLLOWING IS APPLIED TO THE PAGE:
color: #FFFFFF;
font-weight: normal;
}
Once background: #F2F2F2; is removed from the application style class, the row selector works as expected.
.rglrDtTb .ui-datatable-odd {
background: #F2F2F2;
border: 1px solid #999999;
}
The Row Selector does not apply the style properly. This is what I see in Firebug:
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, .ui-state-active em {
CROSSED OUT (OVERRIDEN) FROM HERE
background: url("/AMPS_Repository/javax.faces.resource/themes/sam/images/sprite.png.jsf?ln=icefaces.ace") repeat-x scroll left -1400px padding-box #2647A0;
border: 1px solid #AAAAAA;
TO HERE. FOLLOWING IS APPLIED TO THE PAGE:
color: #FFFFFF;
font-weight: normal;
}
Once background: #F2F2F2; is removed from the application style class, the row selector works as expected.
Activity
| Field | Original Value | New Value |
|---|---|---|
| Attachment | firstrowselectedbroken.PNG [ 15583 ] |
| Assignee | Ken Fyten [ ken.fyten ] |
| Affects Version/s | 3.2 [ 10338 ] |
| Workaround Description | Do not override .ui-datatable-odd or .ui-datatable-even with a background |
1. Do not override .ui-datatable-odd or .ui-datatable-even with a background
2. Override .ui-state-active with background: #2647A0; and .ui-state-hover with background: #bfdaff; in application |
| Workaround Exists | Yes [ 10007 ] |
| Assignee | Ken Fyten [ ken.fyten ] | Nils Lundquist [ nils.lundquist ] |
| Fix Version/s | 3.3 [ 10370 ] | |
| Assignee Priority | P2 [ 10011 ] |
This is a unavoidable result of overriding the default theme for the row backgrounds with rules more specific than those from JQUI. However the rules from JQUI are quite unspecific, so even these simple rules take precedence .
Declaring custom even/odd row backgrounds, with greater specificity than the backgrounds that are part of Themeroller, will require custom even/odd hover & selection states to be declared with equally great specificity:
.rglrDtTb .ui-datatable-even.ui-state-active
{ ... }.rglrDtTb .ui-datatable-even.ui-state-hover { ... }
.rglrDtTb .ui-datatable-odd.ui-state-active
{ ... }.rglrDtTb .ui-datatable-odd.ui-state-hover { ... }
Show
Nils Lundquist
added a comment - This is a unavoidable result of overriding the default theme for the row backgrounds with rules more specific than those from JQUI. However the rules from JQUI are quite unspecific, so even these simple rules take precedence .
Declaring custom even/odd row backgrounds, with greater specificity than the backgrounds that are part of Themeroller, will require custom even/odd hover & selection states to be declared with equally great specificity:
.rglrDtTb .ui-datatable-even.ui-state-active
{ ... }
.rglrDtTb .ui-datatable-even.ui-state-hover { ... }
.rglrDtTb .ui-datatable-odd.ui-state-active
{ ... }
.rglrDtTb .ui-datatable-odd.ui-state-hover { ... }
| Status | Open [ 1 ] | Resolved [ 5 ] |
| Resolution | Won't Fix [ 2 ] |
| Status | Resolved [ 5 ] | Closed [ 6 ] |
This is reproducible in the showcase.
I added the following to showcase_styles.css:
.rglrDtTb .ui-datatable-even
{ background: #FFFFFF; border: 1px solid #999999; }.rglrDtTb .ui-datatable-odd
{ background: #F2F2F2; border: 1px solid #999999; }When you add styleClass="rglrDtTb" to dataTableListener.xhtml you will be able to reproduce the issue.