Hello SCN need your help regarding Cross tab formatting

[former_member183157]

Hi all we have a requirement where we have two cross tab's and we want each cross tab to be in different format like color,size etc but problem is when ever we are updating one cross tab with formatting options in a class the other tab is also automatically taking that class and changing in the same way .

             And also second requirement is, is there any class to change the click color of single row after clicking that row? Thanks in advance.

[Former Member · Accepted solution]

Hello,

1. different cross tabs having different css applied:

Example (create at least 3 cross tabs, and assign the css class crosstab_custom_style_1 to one, and the css class crosstab_custom_style_2 to another and leave the 3rd crosstab without a custom css class assigned to it):

/* all crosstabs */
.sapzencrosstab-DataArea td {background: yellow;}
/* crosstabs with custom css class: crosstab_custom_style_1 */
.crosstab_custom_style_1 .sapzencrosstab-DataArea td {background: green; color: white;}
/* crosstabs with custom css class: crosstab_custom_style_2 */
.crosstab_custom_style_2 .sapzencrosstab-DataArea td {background: blue; color: white;}

With this example (all the css code is in 1 custom css file) you will see different css styles for different cross tabs.

Logic behind it: in your custom css file insert your custom css class name at the beginning of the css definitions that you are using for your crosstabs and then assign this/your custom css class name to each crosstab that should have that unique styling under "Crosstab > Property > Display > CSS Class". Note: in the css file the class name must have a dot in front of it without space and in Design Studio you write only the class name without the dot.

2. change css that is applied when clicking on a row or column or hovering over a row or column when Enable Selection is set to true for a cross tab:

The following example is taken from when using Theme "Platinum":

SAP has defined the following css definitions in its own css file:

.sapzencrosstab-HoverRowHeaderCell.sapzencrosstab-HeaderCellDefault {
  background: rgb(203, 226, 241) !important;
}
.sapzencrosstab-RowHeaderArea .sapzencrosstab-HoverRowHeaderCell.sapzencrosstab-HeaderCellAlternating {
  background: rgb(203, 226, 241) !important;
}
.sapzencrosstab-HoverDataCell {
  background: rgb(203, 226, 241) !important;
}
.sapzencrosstab-SelectRowHeaderCell.sapzencrosstab-HeaderCellDefault {
  background: rgb(122, 195, 233) !important;
}
.sapzencrosstab-RowHeaderArea .sapzencrosstab-SelectRowHeaderCell.sapzencrosstab-HeaderCellAlternating {
  background: rgb(122, 195, 233) !important;
}
.sapzencrosstab-SelectDataCell {
  background: rgb(122, 195, 233) !important;
}
.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HoverColHeaderCell {
  background: rgb(203, 226, 241);
}
.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-SelectColHeaderCellOrig {
  background: rgb(122, 195, 233);
}
.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-SelectColHeaderCell {
  background: rgb(122, 195, 233);
}

To change it copy and paste the following into your custom css file (difference from above is only that I changed the colors...):

.sapzencrosstab-HoverRowHeaderCell.sapzencrosstab-HeaderCellDefault {
  background: red !important;
}
.sapzencrosstab-RowHeaderArea .sapzencrosstab-HoverRowHeaderCell.sapzencrosstab-HeaderCellAlternating {
  background: red !important;
}
.sapzencrosstab-HoverDataCell {
  background: red !important;
}
.sapzencrosstab-SelectRowHeaderCell.sapzencrosstab-HeaderCellDefault {
  background: orange !important;
}
.sapzencrosstab-RowHeaderArea .sapzencrosstab-SelectRowHeaderCell.sapzencrosstab-HeaderCellAlternating {
  background: orange !important;
}
.sapzencrosstab-SelectDataCell {
  background: orange !important;
}
.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HoverColHeaderCell {
  background: red;
}
.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-SelectColHeaderCellOrig {
  background: orange;
}
.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-SelectColHeaderCell {
  background: orange;
}

and change the words red and orange into your desired color.

This way you should have all possible scenarios covered, not just some of them, if you redefine the colors for all css selectors that are already defined in the platinum theme.

Regards

David

[former_member183157 · Accepted solution]

Thanks for your quick reply David,it seems to be working fine ,but we have an issue while selecting a particular cell it is working fine but how about entire row selected color can we achieve this

                                  Below snapshot shows we have applied selected color as grey and it is showing for only one cell others as default blue .

[Former Member · Accepted solution]

Hi Hari,

I would need to see your whole current css code you are using to be able to help.

A general issue that you might be experiencing is, when you have set the background color for some cells using the !important key word inappropriately and this then overrides the other definitions. One must be careful with the usage of "!important" and should omit it as much as possible. But as you can see when you open the css files from the SAP Themes, there you will find the usage of "!important" too..., so it can be used, but the more css code is used and you write/add the more often you can then run into collisions with priorities (when to display what style).

To learn more about "!important" search the net for the search term: "selector css specificity".

[former_member183157 · Accepted solution]

Hi David here is the CSS code and also if you take a look at my snapshot you can see the measure values in the data cell are not in the middle of the cell is there any way I can bring them to middle of the cell

.sapzencrosstab-DataCellContentDiv {

      height: 52px;

}

.sapzencrosstab-SelectDataCell {

  background: gray !important;

}

.sapzencrosstab-DataCellAlternating {

      background-color:#F0F8FF !important;

text-align: center;

}

.sapzencrosstab-DataCellDefault {

      background-color: #F0F8FF;

      text-align: center;

}

.sapzencrosstab-DataCellAlternating, .sapzencrosstab-HeaderCellAlternating {

      background-color: #F0F8FF !important;

}

.sapzencrosstab-DataCellDefault, .sapzencrosstab-HeaderCellDefault {

     background-color: #F0F8FF;

}

[Former Member · Accepted solution]

Hi Hari,

I see that you aren't using the css that I posted previously (the example with the colors red and orange). Have you tried extending your css with those additional css definitions?

You have defined something to have the background color gray based upon 1 class only - that certainly isn't enough.

So I would first suggest to also use the css I posted previously and if you still experience problems, than I can post a concrete code for you, but let me first understand what you are trying to achieve:

- when clicking on a row you want the entire row to be gray? In your example screenshot also the cells with "Information Security" and "1 out of 1" should be gray? Anything else?

Regards,

David

[former_member183157 · Accepted solution]

Hi David ,

              We have achieved for what we were looking for  by applying  the CSS code posted by you .Thanks a ton.

Regards,

Hari

[Former Member · Accepted solution]

Hi Hari,

Were you able to change to background colour of an entire row in your crosstab including the first column Group when hovering or selecting it?

Also, are you able to hover over the first column Group to select a row in the crosstab, or only over Hit/Total column?

Thanks.

[Former Member]

Hi!

Its a matter of CSS.

In addition to classes, you have Id for each element in you crosstab.

while the id's of the cells change every time you make a chane in your app, the id of the crosstab doesnt.

the id you are looking for is named something like : CROSSTAB_1_lowerSection

where CROSSTAB_1 is the name of your crosstab.

now what you have to do is concatinate the Id and the class

here is a simple example how its done:

<!DOCTYPE html>

<html>

<head>

<style>

#roman>.roman1

{

background-color:yellow;

}

</style>

</head>

<body>

<div id = "roman">

<p class="roman1">Paragraph 1 in the div.</p>

<p>Paragraph 2 in the div.</p>

</div>

<p class="roman1" >Paragraph 3. Not in a div.</p>

<p>Paragraph 4. Not in a div.</p>

</body>

</html>

here only the row with class "roman1" under element with id "roman" will be painted in yellow

for your second question, the css class is .sapzencrosstab-HoverDataCell.

hope it helps,

Roman

[anshul_bhatt]

Hi Roman,

I want to change the selected cell color so what code i have to use to achieve that....!!

i am giving css code like this,

.sapzencrosstab-HoverDataCell

{

background-color: gray;

}

its not working.

can u please share the correct code.

thanks in advance

Anshul

[former_member183157]

Hi Roman Thank you for your reply I have few questions regarding your solution

1. Is there any way to find id  ?
2. How can we implement the concatenation logic in CSS code ?