Details
-
Type:
Bug
-
Status: Closed
-
Priority:
Major
-
Resolution: Fixed
-
Affects Version/s: 3.0.RC1
-
Fix Version/s: 3.0
-
Component/s: Sample Apps
-
Labels:None
-
Environment:showcase sample app, compat rowSelector component
-
Assignee Priority:P2
-
Affects:Sample App./Tutorial
Description
The only thing that sticks out is that the text colour for the one column on the right that uses outputText instead of just inline EL text will be different from the black that the other columns use. That seems inconsistent, but at least it's a little hint that a row is selected.
Activity
| Field | Original Value | New Value |
|---|---|---|
| Salesforce Case | [] | |
| Component/s | Components [ 10012 ] | |
| Affects | [Sample App./Tutorial] | |
| Assignee Priority | P2 | |
| Assignee | Evgheni Sadovoi [ evgheni.sadovoi ] |
| Attachment | Screen Shot 2011-12-16 at 4.24.11 PM.png [ 13883 ] | |
| Attachment | Screen Shot 2011-12-16 at 4.24.48 PM.png [ 13884 ] |
| Summary | showcase rowSelector styling too subtle | showcase ice:rowSelector has incorrect styling |
| Salesforce Case | [] |
Resolved by putting expressions inside dataTable columns into <ice:outputText/> tags, where necessary.
IMPORTANT READ BELOW:
Turned out to be a ice:dataTable component bug / intended behavior in how it applies styles and render itself back to the browser.
The datatable defined like the one below:
<ice:dataTable value="#
{selector.data}"
var="car"
rows="#
">
//COLUMN 1:
<ice:column>
<f:facet name="header">Make</f:facet>
#
</ice:column>
//COLUMN 2:
<ice:column>
<f:facet name="header">
<ice:outputText value="Chassis"/>
</f:facet>
<ice:outputText value="#{car.chassis}"/>
</ice:column>
</ice:dataTable>
will render its columns back to the browser as:
Column 1 :
<td class="iceDatTblCol1">
RandomMakeDescriptionText
</td>
In this case expression #{car.name}
is rendered back to the browser as a simple text string and ice:dataTable does not know how to attach a style to it.
Column 2:
<td class="iceDatTblCol2">
<span class="iceOutTxt" id="j_idt86:j_idt87:0:j_idt97">RandomChassisDescriptionText</span>
</td>
In this case expression #
{car.chassis}is used inside of the <ice:outputText/> tag. When rendered back to the browser the text string is wrapped in the <span> element to which the dataTable component is capable of applying "iceOutTxt" style class.
Assigning back to Ken to either mark it as resolved or redirect for ice:dataTable component tweaking.
| Assignee | Evgheni Sadovoi [ evgheni.sadovoi ] | Ken Fyten [ ken.fyten ] |
iceOutTxt is a styling that ice:outputText adds itself, not the dataTable. What happens if you use h:outputText instead? Is the styling still to subtle? I'm worried that maybe our theme is using a selector that incorporates the dataTable and the outputText style classes, when it has to work with text from all sources, not just an ice:outputText.
Mark,
You were right. If ice:outputText is replaced with h:outputText the html will look like this:
<td class="iceDatTblCol2">
<span id="j_idt86:j_idt87:0:_t94">
RandomMakeDescriptionText
</span>
</td>
As you can see the span element is generated, but it does not have a style attached to it. This will cause text inside <span> element to always appear in black color instead of changing it during various events such us mouse over and selection.
| Status | Open [ 1 ] | Resolved [ 5 ] |
| Resolution | Fixed [ 1 ] |
| Status | Resolved [ 5 ] | Closed [ 6 ] |
Note that the ice:rowSelector styles correctly in the old compat/component-showcase application (see attached pics). This must be some CSS collision between the standard ICE themes and the application styling.