Quantcast
Channel: SCN : All Content - SAP BusinessObjects Design Studio
Viewing all articles
Browse latest Browse all 4216

Crosstab css: Zebra style + Responsive effect

$
0
0

Hi everybody.

 

I've got a request for crosstab formating that combines the following formats:

  1. Zebra-like (odd rows with background color A and even rows with background color B)
  2. Responsive look and feel (hover row with background color C and selected row with background color D)

 

In my css file, the following classes are defined:

 

/*Zebra*/

.myZebraTab .sapzencrosstab-RowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(odd) td

{background: #c9c9e4!important;}

.myZebraTab .sapzencrosstab-RowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(even) td

{background: #a4a4ff!important;}

.myZebraTab .sapzencrosstab-DataArea tr:nth-child(odd) td

{background: #c9c9e4 !important;}

.myZebraTab .sapzencrosstab-DataArea tr:nth-child(even) td

{background: #a4a4ff !important;}

 

/*Responsive*/

.myResponsiveTab .sapzencrosstab-HoverRowHeaderCell.sapzencrosstab-HeaderCellDefault

{background: #fbc9a8 !important;}

.myResponsiveTab .sapzencrosstab-RowHeaderArea .sapzencrosstab-HoverRowHeaderCell.sapzencrosstab-HeaderCellDefault

{background: #fbc9a8 !important;}

.myResponsiveTab .sapzencrosstab-RowHeaderArea .sapzencrosstab-HoverRowHeaderCell.sapzencrosstab-HeaderCellAlternating

{background: #fbc9a8 !important;}

.myResponsiveTab .sapzencrosstab-DataArea .sapzencrosstab-HoverDataCell.sapzencrosstab-DataCellDefault

{background: #fbc9a8 !important;}

.myResponsiveTab .sapzencrosstab-DataArea .sapzencrosstab-HoverDataCell.sapzencrosstab-DataCellAlternating

{background: #fbc9a8 !important;}

.myResponsiveTab .sapzencrosstab-HeaderCellHoverRow

{background: #fbc9a8!important;}

.myResponsiveTab .sapzencrosstab-HeaderCellSelectRow

{background: #F9AD79 none repeat scroll 0% 0% !important;}

.myResponsiveTab .sapzencrosstab-DataCellSelectData, .sapzencrosstab-DataCellAlternating.sapzencrosstab-DataCellSelectData

{background: #F9AD79 none repeat scroll 0% 0% !important;}


Each of the above classes works as expected when used individually:


Zebra-like:

Zebra.PNG

Responsive (row 5 is hovered, row 8 is selected):

Responsive.png

 

Our problem is that we cannot use these two classes at the same time. If we do so, the output is as follows:

Zebra-Responsive.png

As you'd notice, the hover color is not applied in the Header Cell of the row.

Moreover, a selected row cannot be recognized at all.

 

Please advice.


Viewing all articles
Browse latest Browse all 4216

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>