ICEfaces
  1. ICEfaces
  2. ICE-7587

showcase ice:rowSelector has incorrect styling

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major 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

      When a row is unselected, and you mouseover it, that styling is a nice noticeably green background colour. When you select a row and mouseover it, that styling is a nice noticeable orange background colour. But when you are not mousing over a selected row, the background colour used is barely distinguishable from the alternating row styling used for unselected rows.

      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

        Hide
        Ken Fyten added a comment -

        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.

        Show
        Ken Fyten added a comment - 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.
        Hide
        Evgheni Sadovoi added a comment - - edited

        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="#

        {tableData.defaultRows}

        ">
        //COLUMN 1:
        <ice:column>
        <f:facet name="header">Make</f:facet>
        #

        {car.name}
        </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.

        Show
        Evgheni Sadovoi added a comment - - edited 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="# {tableData.defaultRows} "> //COLUMN 1: <ice:column> <f:facet name="header">Make</f:facet> # {car.name} </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.
        Hide
        Evgheni Sadovoi added a comment -

        Assigning back to Ken to either mark it as resolved or redirect for ice:dataTable component tweaking.

        Show
        Evgheni Sadovoi added a comment - Assigning back to Ken to either mark it as resolved or redirect for ice:dataTable component tweaking.
        Hide
        Mark Collette added a comment -

        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.

        Show
        Mark Collette added a comment - 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.
        Hide
        Evgheni Sadovoi added a comment -

        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.

        Show
        Evgheni Sadovoi added a comment - 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.

          People

          • Assignee:
            Ken Fyten
            Reporter:
            Mark Collette
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: