Skip to Content
avatar image
Former Member

Formatting row header of emphasized cell in Crosstab using CSS

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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Feb 09, 2017 at 01:28 PM

    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/

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Feb 09, 2017 at 01:53 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 09, 2017 at 03:16 PM
    Add comment
    10|10000 characters needed characters exceeded