Skinning tr:table lines on hover

On 8/29/07, Andrew Robinson < andrew.rw.robinsongmail.com">andrew.rw.robinsongmail.com> wrote:

It doesn't look like the table renderer adds any style classes onto
the TR elements. You could use CSS to do it. Have you tried:

af|table:content > TR:hover {
 &nbsp;background-color: yellow;
}

This should theoretically work in IE7 and the "good" browsers

On 8/29/07, Francisco Passos < francisco.passosgmail.com">francisco.passosgmail.com> wrote:
>; Hello all!
>
> I'm wondering if it is possible to change the css style for a tr:table line
>; when the mouse is hovering.
> And if so, can one do it directly on the skin?
>
> Thank you,
>
> Francisco Passos
>;

On 8/30/07, Andrew Robinson < andrew.rw.robinsongmail.com">andrew.rw.robinsongmail.com> wrote:

I got it to work, but it is very ugly and a really bad hack:

CSS:
.hoverTable TBODY > TR > TD > TABLE > TBODY > TR > TD {
 &nbsp;background-color: transparent;
}
.hoverTable TBODY > TR > TD > TABLE > TBODY > TR:hover {
  background-color: yellow;
}

XHTML:
<;tr:table var="_cookie&quot; value=&quot;#{facesContext.externalContext.request.cookies}"
 &nbsp;styleClass="hoverTable&quot;>
&nbsp; <;tr:column&gt;
 ; &nbsp; #{_cookie.name}
 &nbsp;</tr:column>
  ;<tr:column>
&nbsp; &nbsp; #{_cookie.value}
  </tr:column&gt;
</tr:table>


It would be great to get skinning class support on every element
written by any of the Trinidad renderers.

Maybe one of the skin experts can shed some light and a better solution.

-Andrew

On 8/30/07, Francisco Passos < francisco.passosgmail.com">francisco.passosgmail.com> wrote:
&gt; Hello Andrew, thank you for your tip.
>
> I just tried your solution, but it doesn't appear to work.
>
> The generated css has this
>
> .af_table.p_AFContent > TR:hover {background-color:yellow}
>
>  However it is mentioned nowhere in the html, nor is it implicitly used and
> applied to the table...
&gt;
> What could cause this? Are there alternatives?
>
&gt; Thank you,
> Francisco Passos
&gt;
>
&gt;
>
>; &nbsp;On 8/29/07, Andrew Robinson < andrew.rw.robinsongmail.com">andrew.rw.robinsongmail.com> wrote:
>; > It doesn't look like the table renderer adds any style classes onto
>; > the TR elements. You could use CSS to do it. Have you tried:
>; >
> > af|table:content > TR:hover {
> >   background-color: yellow;
&gt; > }
> >
> > This should theoretically work in IE7 and the "good" browsers
> >
> > On 8/29/07, Francisco Passos < francisco.passosgmail.com">francisco.passosgmail.com> wrote:
>; > > Hello all!
> > >
> > > I'm wondering if it is possible to change the css style for a tr:table
> line
> > > when the mouse is hovering.
> > > And if so, can one do it directly on the skin?
> > >
> > > Thank you,
> > >
> > > Francisco Passos
&gt; > >
> >
>
>

On 8/30/07, Andrew Robinson < andrew.rw.robinsongmail.com">andrew.rw.robinsongmail.com> wrote:

I got it to work, but it is very ugly and a really bad hack:

CSS:
.hoverTable TBODY > TR > TD > TABLE > TBODY > TR > TD {
 &nbsp;background-color: transparent;
}
.hoverTable TBODY > TR > TD > TABLE > TBODY > TR:hover {
  background-color: yellow;
}

XHTML:
<;tr:table var="_cookie&quot; value=&quot;#{facesContext.externalContext.request.cookies}"
 &nbsp;styleClass="hoverTable&quot;>
&nbsp; <;tr:column&gt;
 ; &nbsp; #{_cookie.name}
 &nbsp;</tr:column>
  ;<tr:column>
&nbsp; &nbsp; #{_cookie.value}
  </tr:column&gt;
</tr:table>


It would be great to get skinning class support on every element
written by any of the Trinidad renderers.

Maybe one of the skin experts can shed some light and a better solution.

-Andrew

On 8/30/07, Francisco Passos < francisco.passosgmail.com">francisco.passosgmail.com> wrote:
&gt; Hello Andrew, thank you for your tip.
>
> I just tried your solution, but it doesn't appear to work.
>
> The generated css has this
>
> .af_table.p_AFContent > TR:hover {background-color:yellow}
>
>  However it is mentioned nowhere in the html, nor is it implicitly used and
> applied to the table...
&gt;
> What could cause this? Are there alternatives?
>
&gt; Thank you,
> Francisco Passos
&gt;
>
&gt;
>
>; &nbsp;On 8/29/07, Andrew Robinson < andrew.rw.robinsongmail.com">andrew.rw.robinsongmail.com> wrote:
>; > It doesn't look like the table renderer adds any style classes onto
>; > the TR elements. You could use CSS to do it. Have you tried:
>; >
> > af|table:content > TR:hover {
> >   background-color: yellow;
&gt; > }
> >
> > This should theoretically work in IE7 and the "good" browsers
> >
> > On 8/29/07, Francisco Passos < francisco.passosgmail.com">francisco.passosgmail.com> wrote:
>; > > Hello all!
> > >
> > > I'm wondering if it is possible to change the css style for a tr:table
> line
> > > when the mouse is hovering.
> > > And if so, can one do it directly on the skin?
> > >
> > > Thank you,
> > >
> > > Francisco Passos
&gt; > >
> >
>
>

On 8/30/07, Jeanne Waldman < jeanne.waldmanoracle.com">jeanne.waldmanoracle.com> wrote:

I agree as well. The components my team is working on now have a lot more skinning hooks mainly because we don't want people to have to do what you are doing.
- Jeanne

Simon Lessard wrote:

mail.gmail.com" type="cite">Yeah, I agree more component parts need their own selector...

The following might work, but will cause some problem with nesting:

af|table::content tr:hover
{
  background-color: yellow;
}

Regards,

~ Simon

On 8/30/07, Andrew Robinson < andrew.rw.robinsongmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">andrew.rw.robinsongmail.com> wrote:

I got it to work, but it is very ugly and a really bad hack:

CSS:
.hoverTable TBODY > TR > TD > TABLE > TBODY > TR > TD {
&nbsp; background-color: transparent;
}
.hoverTable TBODY > TR > TD > TABLE > TBODY > TR:hover {
 &nbsp;background-color: yellow;
}

XHTML:
<tr:table var="_cookie&quot; value=&quot;#{facesContext.externalContext.request.cookies}&quot;
 ; styleClass=&quot;hoverTable">
 &nbsp;<tr:column>
 &nbsp;  #{_cookie.name}
 &nbsp;</tr:column>
 &nbsp;<tr:column>
 &nbsp; &nbsp;#{_cookie.value}
  ;</tr:column>
</tr:table>


It would be great to get skinning class support on every element
written by any of the Trinidad renderers.

Maybe one of the skin experts can shed some light and a better solution.

-Andrew

On 8/30/07, Francisco Passos < francisco.passosgmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">francisco.passosgmail.com> wrote:
> Hello Andrew, thank you for your tip.
>;
> I just tried your solution, but it doesn't appear to work.
&gt;
> The generated css has this
>;
> .af_table.p_AFContent > TR:hover {background-color:yellow}
>
> &nbsp;However it is mentioned nowhere in the html, nor is it implicitly used and
> applied to the table...
>
>; What could cause this? Are there alternatives?
>
> Thank you,
>; Francisco Passos
>
>
>
>
&gt; &nbsp;On 8/29/07, Andrew Robinson < andrew.rw.robinsongmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">andrew.rw.robinsongmail.com> wrote:
> > It doesn't look like the table renderer adds any style classes onto
> > the TR elements. You could use CSS to do it. Have you tried:
&gt; >
>; > af|table:content > TR:hover {
> >   background-color: yellow;
> > }
> >
>; > This should theoretically work in IE7 and the "good" browsers
> >
>; > On 8/29/07, Francisco Passos < francisco.passosgmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">francisco.passosgmail.com> wrote:
> > > Hello all!
>; > >
>; > > I'm wondering if it is possible to change the css style for a tr:table
> line
>; > > when the mouse is hovering.
> > > And if so, can one do it directly on the skin?
&gt; > >
>; > > Thank you,
>; > >
>; > > Francisco Passos
> > >
>; >
>;
>

I did not test it though, but it should work.


Regards,

~ Simon

On 8/31/07, Francisco Passos < francisco.passosgmail.com">francisco.passosgmail.com> wrote:

Thank you for all your tips!

Andrew, your solution might work, but as you put it, it is highly dependent on the rendered html, which means any change in the hierarchy will make it stop working.

As for Simon, your solution:

af|table::content tr:hover
{
  background-color: yellow;
}

Doesn't work, because I'm using banding.

However if I add

af|column::cell-text{-tr-inhibit: background-color}

af|column::cell-text-band{-tr-inhibit: background-color}

like Chris suggested, it works fine for the hover, but I lose banding.


Is there a way to get hover AND banding together?

On 8/30/07, Jeanne Waldman < jeanne.waldmanoracle.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">jeanne.waldmanoracle.com> wrote:

I agree as well. The components my team is working on now have a lot more skinning hooks mainly because we don't want people to have to do what you are doing.
- Jeanne

Simon Lessard wrote:

mail.gmail.com" type="cite">Yeah, I agree more component parts need their own selector...

The following might work, but will cause some problem with nesting:

af|table::content tr:hover
{
  background-color: yellow;
}

Regards,

~ Simon

On 8/30/07, Andrew Robinson < andrew.rw.robinsongmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">andrew.rw.robinsongmail.com> wrote:

I got it to work, but it is very ugly and a really bad hack:

CSS:
.hoverTable TBODY > TR > TD > TABLE > TBODY > TR > TD {
&nbsp; background-color: transparent;
}
.hoverTable TBODY > TR > TD > TABLE > TBODY > TR:hover {
 &nbsp;background-color: yellow;
}

XHTML:
<tr:table var="_cookie&quot; value=&quot;#{facesContext.externalContext.request.cookies}&quot;
 ; styleClass=&quot;hoverTable">
 &nbsp;<tr:column>
 &nbsp;  #{_cookie.name}
 &nbsp;</tr:column>
 &nbsp;<tr:column>
 &nbsp; &nbsp;#{_cookie.value}
  ;</tr:column>
</tr:table>


It would be great to get skinning class support on every element
written by any of the Trinidad renderers.

Maybe one of the skin experts can shed some light and a better solution.

-Andrew

On 8/30/07, Francisco Passos < francisco.passosgmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">francisco.passosgmail.com> wrote:
> Hello Andrew, thank you for your tip.
>;
> I just tried your solution, but it doesn't appear to work.
&gt;
> The generated css has this
>;
> .af_table.p_AFContent > TR:hover {background-color:yellow}
>
> &nbsp;However it is mentioned nowhere in the html, nor is it implicitly used and
> applied to the table...
>
>; What could cause this? Are there alternatives?
>
> Thank you,
>; Francisco Passos
>
>
>
>
&gt; &nbsp;On 8/29/07, Andrew Robinson < andrew.rw.robinsongmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">andrew.rw.robinsongmail.com> wrote:
> > It doesn't look like the table renderer adds any style classes onto
> > the TR elements. You could use CSS to do it. Have you tried:
&gt; >
>; > af|table:content > TR:hover {
> >   background-color: yellow;
> > }
> >
>; > This should theoretically work in IE7 and the "good" browsers
> >
>; > On 8/29/07, Francisco Passos < francisco.passosgmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">francisco.passosgmail.com> wrote:
> > > Hello all!
>; > >
>; > > I'm wondering if it is possible to change the css style for a tr:table
> line
>; > > when the mouse is hovering.
> > > And if so, can one do it directly on the skin?
&gt; > >
>; > > Thank you,
>; > >
>; > > Francisco Passos
> > >
>; >
>;
>