odd behaviour with style and id with subTable and table

[nimo22]

Hello,

I have something like this:

<rich:dataTable id="dataTableSuper" styleClass="dataTableSuper" var="_o" value="#{o}">

 <rich:subTable id="dataTableSub" styleClass="dataTableSub"...>

..

all works. But now, I want to style my dataTableSuper and my dataTableSub:


I want to style my dataTableSuper:


case 1a via styleClass:

/** this works **/
.dataTableSuper.rich-subtable-header{

 background-color:red;
}

case 1b via component-ID:

/** this does NOT work **/
#dataTableSuper.rich-subtable-header{

 background-color:red;
}

I want to style my dataTableSub:

case 2a via styleClass:

/** this does NOT work **/
.dataTableSub.rich-subtable-header{

 background-color:red;
}

case 2b via component-ID:

/** this does also NOT work **/
#dataTableSub.rich-subtable-header{

 background-color:red;
}

case 2c via general style:

/** this works **/
.rich-subtable-header{

 background-color:red;
}

Why does the styling does not work as expected? I can style my subTable only via case2c and neither via subtables ID nor via styleClass-Property.

[nimo22]

Forget the last post, look at that:


I have something like this:

Code:

<rich:dataTable id="dataTableSuper" styleClass="dataTableSuper" var="_o" value="#{o}">

<rich:subTable id="dataTableSub" styleClass="dataTableSub"...>

..



all works. But now, I want to style my dataTableSuper and my dataTableSub:


I want to style my dataTableSuper:


case 1a via styleClass:
Code:

/** this works **/
.dataTableSuper .rich-table-row{

background-color:red;
}



case 1b via component-ID:
Code:

/** this does NOT work **/
#.dataTableSuper .rich-table-row{

background-color:red;
}




I want to style my dataTableSub:

case 2a via styleClass:
Code:

/** this does NOT work **/
.dataTableSub.rich-subtable-header{

background-color:red;
}



case 2b via component-ID:
Code:

/** this does also NOT work **/
#dataTableSub.rich-subtable-header{

background-color:red;
}



case 2c via general style:
Code:

/** this works **/
.rich-subtable-header{

background-color:red;
}



Why does the styling does not work as expected? I can style my subTable only via case2c and neither via subtables ID nor via styleClass-Property.

[ilya_shaikovsky]

such problems could be easilly explored via fireBug. you will be able to see how different selectors applied.

[nimo22]

yes I am using firebug and it tells me that the html contains "myStyleDataTableSuper", but not a "myStyleDataTableSub" - even I have declared it in rich:subTable - very odd.

<rich:dataTable id="dataTableSuper" styleClass="myStyleDataTableSuper" var="_o" value="#{o}">

<rich:subTable id="dataTableSub" styleClass="myStyleDataTableSub"...>

However, I style the rich:subTable via myStyleDataTableSuper not via myStyleDataTableSub and it works.

thanks.

[ilya_shaikovsky]

Actually after revising your issue i could only tell you that the DataTable components encodes table and put id and style and class to table element. And subtable just has no place to encode these attributes - it's not encodes table element but just set of details rows. So class/style attributes not present in component attributes b.t.w. Facelets ignores that fact and allows you to define any non-existent attributes.

[nimo22]

okay thanks.

So class/style attributes not present in component attributes b.t.w. Facelets ignores that fact and allows you to define any non-existent attributes.

however, I use facelets..