Change display for one crosstab only

[Former Member]

Hello people,

I have one question : is it possible to modify the display of a crosstab ? And only one !

Here the css i want to use for this one crosstab (in this exemple, it will works for all crosstab) :

.sapzencrosstab-HeaderCellDefault  .sapzencrosstab-DataArea, .sapzencrosstab-DimensionHeaderArea, .sapzencrosstab-ColumnHeaderArea

{

  font-size : 10px;

  height : 10px;

}

.sapzencrosstab-DataCellDefault, .sapzencrosstab-HeaderCellDefault{

  height: 10px;

}

.sapzencrosstab-DataCellContentDiv , .sapzencrosstab-RowHeaderArea

{

  font-size : 10px;

}

How can i use this CSS as one CSS Class and apply it for a crosstab without modifying another one ?

Thanks all !

[Former Member · Accepted solution]

Hi !

Thank both for your answer.

I tried your solution but it don't work.

For exemple, i created a css class .crosstab10, put it for one crosstab, but still all my crosstabs are impacted by this css..

Here my class :

.crosstab10 .sapzencrosstab-HeaderCellDefault  .sapzencrosstab-DataArea, .sapzencrosstab-DimensionHeaderArea, .sapzencrosstab-ColumnHeaderArea, .sapzencrosstab-DataCellDefault, .sapzencrosstab-DataCellContentDiv , .sapzencrosstab-RowHeaderArea

{

  font-size : 10px;

  height : 10px;

}

[Former Member · Accepted solution]

Hi Jonas,

I tried your css and yes it applies to all crosstabs even with selectors.

But I think there are other css codes able to meet your need. For example, to change the font size and height of a certain crosstab:

#CROSSTAB_2 {

  font-size: 20px;

}

#CROSSTAB_2 .sapzencrosstab-DataCellContentDiv { 

  height: 50px !important;

}

Best regards,

Alfred

[former_member194504 · Accepted solution]

Hi Jonas,

Then you can try with ID selector as Alfred specified. It will do the job you need.

Thanks,

Nithyanandam

[Former Member · Accepted solution]

Hi,

is it possible to define classes like that?

.sapzencrosstab-HeaderCellDefault  .sapzencrosstab-DataArea, .sapzencrosstab-DimensionHeaderArea, .sapzencrosstab-ColumnHeaderArea, .sapzencrosstab-DataCellDefault, .sapzencrosstab-DataCellContentDiv , .sapzencrosstab-RowHeaderArea

{

  font-size : 10px;

  height : 10px;

}

.crosstab10-HeaderCellDefault  .crosstab10-DataArea, .crosstab10-DimensionHeaderArea, .crosstab10-ColumnHeaderArea, .crosstab10-DataCellDefault, .crosstab10-DataCellContentDiv , .crosstab10-RowHeaderArea

{

  font-size : 8px;

  height : 8px;

}

Jean-Guillaume

[former_member194504 · Accepted solution]

Hi Jean,

Its absolutely possible in css to make selector like this, however please make sure the selection selectors are right. For example,

<div class="a">
<div class="b">B
</div>
<div class="c">C
</div>
</div>

CSS would be,

.b,.c{
    color:red;
}

which makes class b and c as color red. you can check the result Edit fiddle - JSFiddle. Again, just make sure your selectors are right 

Thanks,

Nithyanandam

[Former Member]

Hi Jonas,

Besides class selector, you can use id selector too.

For example,

#CROSSTAB_1 .sapzencrosstab-DataCellDefault, .sapzencrosstab-HeaderCellDefault{

  height: 10px;

}

Best,

Alfred

[former_member194504]

Hi Jonas,

It is absolutely possible. Just add a classname to the crosstab in property sheet and append the class name before your css. For example,

.yourclassname .sapzencrosstab-DataCellContentDiv , .sapzencrosstab-RowHeaderArea

{

  font-size : 10px;

}

Thanks,

Nithyanandam