Not sure where you are getting the table in the header from in 1.0.3
trinidad, the table is rendering this output:
<th class="af_column_sortable-header-text" nowrap=""
onclick="return _tableSort('mainForm',1,'_id46','name','ascending');"
scope="col">
<span class="sortHeader">Name</span>
<a onclick="return
_tableSort('mainForm',1,'_id46','name','ascending');" href="#">
<img border="0" align="middle" alt="Sorted in ascending order"
title="Sorted in ascending order"
src="/test/skins/standard/images/icon_sort_asc.png"/>
</a>
</th>
Without customizing the renderer, I am not sure if there is any way of
getting any HTML around the generated link element.
This is working with the above example:
af|table::content af|column::sortable-header-text .sortHeader {
position: relative;
float: left;
}
af|table::content af|column::sortable-header-text A {
position: relative;
float: right;
}
af|column::sort-ascend-icon:alias {
content: url(/skins/standard/images/icon_sort_asc.png);
}
af|column::sort-descend-icon:alias {
content: url(/skins/standard/images/icon_sort_desc.png);
}
I would just prefer to not have to add the extra SPAN, but I can live with it.
On 9/6/07, venkata guddanti <[EMAIL PROTECTED]> wrote:
> 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?
> > >
> >
> >
>
>
