Skip to Content
0

Formatting row header of emphasized cell in Crosstab using CSS

Feb 09, 2017 at 01:20 PM

396

avatar image
Former Member

I am trying to do some formatting using CSS on a Crosstab in Design Studio 1.6.

We have highlighted some values in our BEX Query used as the datasource for the Analysis Application (Design Studio), but when doing that it only makes the numeric values "bold" in the crosstab, and does not do anything to the row header.

I tried using CSS to change the background-color of the "Emphasized" datacells, but that also just changes the background color for the cells that are bold. It does not affect the row header which I need changed as well. See screenshot for reference.

The CSS code I used to change the background-color to yellow:

.sapzencrosstab-DataCellEmphasized{
background-color: yellow;
}

How can I get the required cells highlighted on the left as well?
I cannot use the following CSS as the data is not static, and once you expand sections it causes the highlighting to be incorrect as it will highlight a specific row number (static).

#CROSSTAB_1_rowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(1) > td,

#CROSSTAB_1_rowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(4) > td {

background-color:yellow !important;

}

#CROSSTAB_1_dataArea tr:nth-child(1) > td,

#CROSSTAB_1_dataArea tr:nth-child(4) > td {

background-color:yellow !important;

}


I need the yellow highlighting to happen for any "Emphasized" rows, including it's header on the left. Basically the entire row should highlight if set in BEX, not just the data area values (numeric).

78bfb.png (58.4 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Tammy Powlas
Feb 09, 2017 at 01:28 PM
0

For the header, you can bold using this: .sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellDefault, .sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellDefault { white-space: normal; word-wrap: break-word; color:black; font-weight: bold; text-align: center; }

On the other changes, the best thing to do is to debug CSS in F12 using Chrome. See https://blogs.sap.com/2014/05/11/how-to-find-and-change-the-css-class-design-studio/

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Feb 09, 2017 at 01:53 PM
0

Not exactly what I am looking for in this scenario.
I need the whole row to highlight in yellow & bold, not just the numeric values in the data area.
I am also not trying to highlight / bold the headers of the crosstab at the top, that should remain as is, I am merely working with the "Struct." column and everything below it.

Share
10 |10000 characters needed characters left characters exceeded
Vidhya V Feb 09, 2017 at 03:16 PM
0
Share
10 |10000 characters needed characters left characters exceeded