Hello,
I've managed to add rounded corners to a few RF rendered components, but I cannot get it to work for rich:dataTable. I've tried
{code}
.rich-table-thead,
.rich-table-header,
.rich-table-headercell,
.rich-table-subheader,
.rich-table-subheadercell,
.rich-table-sortable-header,
.rich-table-tbody,
.rich-table-cell
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}{code}
but none of them give rounded corners. The only rule that does something at all is .rich-table
{code}
.rich-table
{
margin: 10px 0px;
border: 1px solid lime;
background-color: cyan;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #666 4px 4px 5px;
-moz-box-shadow: #666 4px 4px 5px;
box-shadow: #666 4px 4px 5px;
}
{code}
by showing the rounded corner in all but the top left corner (drop shadow used to show top right corner). (Note, you need Firefox 3.6+ or some newer Chrome or Safari to see this. Probably IE 9 works, too.)
Here's a screenshot:
!http://www.kawoolutions.com/media/rich-table-rounded-corners.png!
Is there any secret here as to why this isn't working as expected, like the simple toggle panel below? Why aren't the table sub components reacting to the custom CSS?
Karsten