Return-Path: 
 <users-return-43326-apmail-myfaces-users-archive=myfaces.apache.org@myfaces.apache.org>
Delivered-To: apmail-myfaces-users-archive@www.apache.org
Received: (qmail 45161 invoked from network); 6 Sep 2007 23:31:22 -0000
Received: from hermes.apache.org (HELO mail.apache.org) (140.211.11.2)
  by minotaur.apache.org with SMTP; 6 Sep 2007 23:31:22 -0000
Received: (qmail 5712 invoked by uid 500); 6 Sep 2007 23:28:56 -0000
Delivered-To: apmail-myfaces-users-archive@myfaces.apache.org
Received: (qmail 5682 invoked by uid 500); 6 Sep 2007 23:28:56 -0000
Mailing-List: contact users-help@myfaces.apache.org; run by ezmlm
Precedence: bulk
List-Help: <mailto:users-help@myfaces.apache.org>
List-Unsubscribe: <mailto:users-unsubscribe@myfaces.apache.org>
List-Post: <mailto:users@myfaces.apache.org>
List-Id: <users.myfaces.apache.org>
Reply-To: "MyFaces Discussion" <users@myfaces.apache.org>
Delivered-To: mailing list users@myfaces.apache.org
Received: (qmail 5668 invoked by uid 99); 6 Sep 2007 23:28:55 -0000
Received: from nike.apache.org (HELO nike.apache.org) (192.87.106.230)
    by apache.org (qpsmtpd/0.29) with ESMTP; Thu, 06 Sep 2007 16:28:55 -0700
X-ASF-Spam-Status: No, hits=2.0 required=10.0
	tests=HTML_MESSAGE,SPF_PASS
X-Spam-Check-By: apache.org
Received-SPF: pass (nike.apache.org: domain of ven.guddanti@gmail.com
 designates 64.233.182.187 as permitted sender)
Received: from [64.233.182.187] (HELO nf-out-0910.google.com) (64.233.182.187)
    by apache.org (qpsmtpd/0.29) with ESMTP; Thu, 06 Sep 2007 23:30:11 +0000
Received: by nf-out-0910.google.com with SMTP id b2so304777nfb
        for <users@myfaces.apache.org>; Thu, 06 Sep 2007 16:28:12 -0700 (PDT)
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed;
        d=gmail.com; s=beta;
        h=domainkey-signature:received:received:message-id:date:from:to:subject:in-reply-to:mime-version:content-type:references;
        bh=2/oOhQF8dcP8l2kJVquVW7QDTJwjg2wZirCA7gP56C0=;
        b=hSYswnkZ8EOQ3CfYxVu9QXl3MHInXwmIwTt18tI4BON4vaBUbBxuzY8PFqqoT45kBy8FaPzNEWlHGCgAIKGU3Cp+DzPKtnA+XLLRUxgEfNF+wslHp40e4nIvjKYkzEx5y+0kbcSft/iqmKzoLLgV4Uu4xH3QlfKjrOjrg2R7fRI=
DomainKey-Signature: a=rsa-sha1; c=nofws;
        d=gmail.com; s=beta;
        h=received:message-id:date:from:to:subject:in-reply-to:mime-version:content-type:references;
        b=lXz3E1Q5sWRuhBrVGo75hZV9eCVsGTFjmqMSJp0cH7niWOcvgDzntsM6gI1zAL9YhDF09HRi/SjbyySDx6UI6H+6RTyO039W7NygLe0caNUfE9AVNthwymS3C/RrvReA433pCrFw3Bmh3/eN0e3Ot2k3RFsCdUQuEPMJgOJrv4w=
Received: by 10.86.73.17 with SMTP id v17mr991955fga.1189121288707;
        Thu, 06 Sep 2007 16:28:08 -0700 (PDT)
Received: by 10.86.53.17 with HTTP; Thu, 6 Sep 2007 16:28:08 -0700 (PDT)
Message-ID: <fa024af00709061628v5374c87ck989e5346a158ea61@mail.gmail.com>
Date: Thu, 6 Sep 2007 17:28:08 -0600
From: "venkata guddanti" <ven.guddanti@gmail.com>
To: "MyFaces Discussion" <users@myfaces.apache.org>
Subject: Re: Best way to right-dock the sort icon in a tr:table column header?
In-Reply-To: <bc36a6210709061406k768951c5n4c6a7283147590e0@mail.gmail.com>
MIME-Version: 1.0
Content-Type: multipart/alternative;
	boundary="----=_Part_1370_15771071.1189121288708"
References: <bc36a6210709061406k768951c5n4c6a7283147590e0@mail.gmail.com>
X-Virus-Checked: Checked by ClamAV on apache.org

------=_Part_1370_15771071.1189121288708
Content-Type: text/plain; charset=ISO-8859-1
Content-Transfer-Encoding: 7bit
Content-Disposition: inline

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?
>

------=_Part_1370_15771071.1189121288708
Content-Type: text/html; charset=ISO-8859-1
Content-Transfer-Encoding: 7bit
Content-Disposition: inline

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&nbsp; out table header:<br><br>.xq6 {&nbsp;&nbsp;&nbsp; DISPLAY: inline-block;&nbsp;&nbsp;&nbsp; BACKGROUND-IMAGE: url(/faces-trunk/afr/sort_des_n.png);&nbsp;&nbsp;&nbsp; WIDTH: 14px;&nbsp;&nbsp;&nbsp; CURSOR: default;&nbsp;&nbsp;&nbsp; BACKGROUND-REPEAT: no-repeat;&nbsp;&nbsp;&nbsp; HEIGHT: 14px;&nbsp;&nbsp;&nbsp; TEXT-DECORATION: none} 
<br><br>.xq5 {&nbsp;&nbsp;&nbsp; DISPLAY: inline-block;&nbsp;&nbsp;&nbsp; BACKGROUND-IMAGE: url(/faces-trunk/afr/sort_asc_n.png);&nbsp;&nbsp;&nbsp; WIDTH: 14px;&nbsp;&nbsp;&nbsp; CURSOR: default;&nbsp;&nbsp;&nbsp; BACKGROUND-REPEAT: no-repeat;&nbsp;&nbsp;&nbsp; HEIGHT: 14px;&nbsp;&nbsp;&nbsp; TEXT-DECORATION: none}<br><br>&lt;TH&gt;&lt;DIV style=&quot;FLOAT: right; POSITION: relative&quot;&gt;&lt;TABLE class=&quot;xqo&quot; id=&quot;demoTemplate:table:j_id___jsp_tag_ctru20::afrSI&quot; style=&quot;DISPLAY: none&quot; cellSpacing=&quot;0&quot; cellPadding=&quot;0&quot; summary=&quot;&quot; border=&quot;0&quot;&gt;&lt;TBODY&gt;&lt;TR&gt;&lt;TD _afrSortAsc=&quot;1&quot;&gt;&lt;A class=&quot;xq5&quot; title=&quot;Sort Ascending&quot;&gt;&lt;/A&gt;&lt;/TD&gt;&lt;TD _afrSortDesc=&quot;1&quot;&gt;&lt;A class=&quot;xq6&quot; title=&quot;Sort Descending&quot;&gt;&lt;/A&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;/DIV&gt;Name&lt;/TH&gt;
<br><br><div><span class="gmail_quote">On 9/6/07, <b class="gmail_sendername">Andrew Robinson</b> &lt;<a href="mailto:andrew.rw.robinson@gmail.com">andrew.rw.robinson@gmail.com</a>&gt; wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Any suggestions on the best way to get the sort icon to dock on the<br>right with the text left-aligned?<br><br>using float:right on the link is hard to get working cross-browser as<br>floating right tends to mess up line wrapping especially in IE.
<br><br>I got it somewhat working with putting a span around the text:<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr:column sortable=&quot;true&quot; sortProperty=&quot;name&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;f:facet name=&quot;header&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr:outputText styleClass=&quot;sortHeader&quot; value=&quot;Name&quot; /&gt;
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/f:facet&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#{<a href="http://var.name">var.name</a>}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr:column&gt;<br>And using:<br><br>SPAN.sortHeader {<br>&nbsp;&nbsp;display: block;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;float: left;<br>
}<br><br>It worked in FF 2, but not a pretty solution. Any tips on a better idea?<br></blockquote></div><br>

------=_Part_1370_15771071.1189121288708--