dataTable sorting icon is not placed next to headline

[semmel]

JSF: 2.0.3 PF: primefaces-2.2.RC2.jar

Using your example showcase at http://www.primefaces.org/showcase/ui/d ... orting.jsf:

Code: Select all

         <p:column sortBy="#{...}">  
             <f:facet name="header"><h:outputText value="Model" /></f:facet>  
         </p:column>  
         <p:column sortBy="#{...}">  
             <f:facet name="header"><h:outputText value="Yead_length_testlength_testlength_testlength_testlength_testlength_testlength_testlength_testlength_test" /></f:facet>  
         </p:column>  
         <p:column sortBy="#{...}">  
             <f:facet name="header"><h:outputText value="Manufacturer length_test" /></f:facet>  
         </p:column>  
         <p:column sortBy="#{...}">  
             <f:facet name="header"><h:outputText value="Color" /></f:facet>  
         </p:column> 

Results in:

Code: Select all

<tr>
    <th class="ui-state-default ui-sortable-column">
        <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
        Model
    </th>
    <th class="ui-state-default ui-sortable-column">
        <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
        Yead_length_testlength_testlength_testlength_testlength_testlength_testlength_testlength_testlength_test
    </th>
    <th class="ui-state-default ui-sortable-column">
        <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
        Manufacturer length_test
</th>
    <th class="ui-state-default ui-sortable-column">
        <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
        Color
    </th>
</tr>

This creates a lot of troubles formatting the sorting icon!

Would it be possible to place the header text in the span?E.g.:

Code: Select all

<th class="ui-state-default ui-sortable-column">
    <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s">
        Color
        <img class="ui-icon">
    </span>
</th>

Whith this styles you can format the the icon without troubles:

Code: Select all

<tr>
    <th style="white-space: normal;" class="ui-state-default ui-sortable-column">
        Model
        <img class="ui-icon" style="background-position: -128px 0pt; height: 16px; width: 18px; display: inline; padding: 4px 0pt 0pt 16px;">
    </th>
    <th class="ui-state-default ui-sortable-column" style="white-space: normal;">
        Yeadfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdsdfsdfsdfsdfsdfsdfsdfsdfsdsdfsdfsdsdffsdr
        <img style="background-position: -128px 0pt; height: 16px; width: 18px; display: inline; padding: 4px 0pt 0pt 16px;" class="ui-icon">
    </th>
    <th id="j_idt39:j_idt43:j_idt51" style="white-space: normal;" class="ui-state-default ui-sortable-column">
        Manufacturer sdsdfsdfsdf
        <img style="background-position: -128px 0pt; height: 16px; width: 18px; padding: 4px 0pt 2px 16px; top: 0pt; display: inline;" class="ui-icon">
    </th>
    <th id="j_idt39:j_idt43:j_idt54" style="white-space: normal;" class="ui-state-default ui-sortable-column">
        Color
        <img style="background-position: -128px 0pt; height: 16px; width: 18px; display: inline; padding: 4px 0pt 0pt 16px;" class="ui-icon">
    </th>
</tr>

Thanks a lot!