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

    Styling rich-dataTable with rounded corners?

    kwutzke
    kwutzke Jun 15, 2011 2:48 PM

      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