myfaces-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "venkata guddanti" <ven.gudda...@gmail.com>
Subject Re: Best way to right-dock the sort icon in a tr:table column header?
Date Thu, 06 Sep 2007 23:28:08 GMT
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 <andrew.rw.robinson@gmail.com> 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?
>

Mime
View raw message