2 Replies Latest reply on Jun 16, 2011 12:36 PM by Karsten Wutzke

    Styling rich-dataTable with rounded corners?

    Karsten Wutzke Expert

      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