The "Display:none" is not necessary on the table. In our case we were
displaying the sort indicator when the user mouses over the header and
hiding it on mouseout. Also note that it should be float:left in RTL.
Regards,
Venkata
On 9/6/07, venkata guddanti <[EMAIL PROTECTED]> wrote:
>
> I think you do not need a span around the text of the outputText. You can
> add a div in the header with float:right that contains the sort image. Here
> is dom snapshot of out table header:
>
> .xq6 { DISPLAY: inline-block; BACKGROUND-IMAGE:
> url(/faces-trunk/afr/sort_des_n.png); WIDTH: 14px; CURSOR: default;
> BACKGROUND-REPEAT: no-repeat; HEIGHT: 14px; TEXT-DECORATION: none}
>
> .xq5 { DISPLAY: inline-block; BACKGROUND-IMAGE:
> url(/faces-trunk/afr/sort_asc_n.png); WIDTH: 14px; CURSOR: default;
> BACKGROUND-REPEAT: no-repeat; HEIGHT: 14px; TEXT-DECORATION: none}
>
> <TH><DIV style="FLOAT: right; POSITION: relative"><TABLE class="xqo"
> id="demoTemplate:table:j_id___jsp_tag_ctru20::afrSI" style="DISPLAY: none"
> cellSpacing="0" cellPadding="0" summary="" border="0"><TBODY><TR><TD
> _afrSortAsc="1"><A class="xq5" title="Sort Ascending"></A></TD><TD
> _afrSortDesc="1"><A class="xq6" title="Sort
> Descending"></A></TD></TR></TBODY></TABLE></DIV>Name</TH>
>
> On 9/6/07, Andrew Robinson <[EMAIL PROTECTED]> wrote:
> >
> > Any suggestions on the best way to get the sort icon to dock on the
> > right with the text left-aligned?
> >
> > using float:right on the link is hard to get working cross-browser as
> > floating right tends to mess up line wrapping especially in IE.
> >
> > I got it somewhat working with putting a span around the text:
> >
> > <tr:column sortable="true" sortProperty="name">
> > <f:facet name="header">
> > <tr:outputText styleClass="sortHeader" value="Name" />
> > </f:facet>
> > #{var.name}
> > </tr:column>
> > And using:
> >
> > SPAN.sortHeader {
> > display: block;
> > width: 100%;
> > float: left;
> > }
> >
> > It worked in FF 2, but not a pretty solution. Any tips on a better idea?
> >
>
>
