Skip to Content

How can i fix a crosstab graphical issue related with CSS crosstab scripting?

Jan 10, 2017 at 05:07 PM


avatar image


i followed this : Tutorial - Show-Hide columns in a crosstab. in my SAP Design Studio 1.6 Sp3 application.

I created 2 checkboxes group that edit a crosstab with 14 columns: one with 2 options and one with 3 options.

I succeed to create the CSS for all the options and see those changes on the crosstab but i see a graphical issue on the crosstab itself.

when i use the navigation bar to see all the columns showed (a crosstab with 5-6 columns showed and the others hided) all the columns disappeared.


When i uncheck and recheck i can see again the first 3 columns in the right way but i always need the navigation bar for the others columns.

I cannot extend the size of the crosstab.

Before use horizontal navigaton bar:

After using navigation bar:

I think is a graphical issue related to the crosstab and the CSS but i do not know how can fix it.

This is a sample of my CSS code inspired by the link above.

/* show measures YTDBT: 3,4 and 7 columns  hide all the others */

.showMeasure.measureYTDBT .sapzencrosstab-ColumnHeaderArea td.sapzencrosstab-HeaderCellDefault:nth-child(1)
,.showMeasure.measureYTDBT  .sapzencrosstab-ColumnHeaderArea td.sapzencrosstab-HeaderCellDefault:nth-child(2)
,.showMeasure.measureYTDBT  .sapzencrosstab-ColumnHeaderArea td.sapzencrosstab-HeaderCellDefault:nth-child(5)
,.showMeasure.measureYTDBT  .sapzencrosstab-ColumnHeaderArea td.sapzencrosstab-HeaderCellDefault:nth-child(6)
,.showMeasure.measureYTDBT  .sapzencrosstab-ColumnHeaderArea td.sapzencrosstab-HeaderCellDefault:nth-child(8)
,.showMeasure.measureYTDBT  .sapzencrosstab-ColumnHeaderArea td.sapzencrosstab-HeaderCellDefault:nth-child(9)
,.showMeasure.measureYTDBT  .sapzencrosstab-ColumnHeaderArea td.sapzencrosstab-HeaderCellDefault:nth-child(10)
,.showMeasure.measureYTDBT  .sapzencrosstab-ColumnHeaderArea td.sapzencrosstab-HeaderCellDefault:nth-child(11)
,.showMeasure.measureYTDBT  .sapzencrosstab-ColumnHeaderArea td.sapzencrosstab-HeaderCellDefault:nth-child(12)
,.showMeasure.measureYTDBT  .sapzencrosstab-ColumnHeaderArea td.sapzencrosstab-HeaderCellDefault:nth-child(13)
,.showMeasure.measureYTDBT  .sapzencrosstab-ColumnHeaderArea td.sapzencrosstab-HeaderCellDefault:nth-child(14)
,.showMeasure.measureYTDBT  .sapzencrosstab-ColumnHeaderArea td.sapzencrosstab-HeaderCellDefault:not(:nth-child(-n+14)),.showMeasure.measureYTDBT  .sapzencrosstab-DataArea td.sapzencrosstab-DataCellDefault:nth-child(1)
,.showMeasure.measureYTDBT  .sapzencrosstab-DataArea td.sapzencrosstab-DataCellDefault:nth-child(2)
,.showMeasure.measureYTDBT  .sapzencrosstab-DataArea td.sapzencrosstab-DataCellDefault:nth-child(5)
,.showMeasure.measureYTDBT  .sapzencrosstab-DataArea td.sapzencrosstab-DataCellDefault:nth-child(6)
,.showMeasure.measureYTDBT  .sapzencrosstab-DataArea td.sapzencrosstab-DataCellDefault:nth-child(8)
,.showMeasure.measureYTDBT  .sapzencrosstab-DataArea td.sapzencrosstab-DataCellDefault:nth-child(9)
,.showMeasure.measureYTDBT  .sapzencrosstab-DataArea td.sapzencrosstab-DataCellDefault:nth-child(10)
,.showMeasure.measureYTDBT  .sapzencrosstab-DataArea td.sapzencrosstab-DataCellDefault:nth-child(11)
,.showMeasure.measureYTDBT  .sapzencrosstab-DataArea td.sapzencrosstab-DataCellDefault:nth-child(12)
,.showMeasure.measureYTDBT  .sapzencrosstab-DataArea td.sapzencrosstab-DataCellDefault:nth-child(13)
,.showMeasure.measureYTDBT  .sapzencrosstab-DataArea td.sapzencrosstab-DataCellDefault:nth-child(14)
,.showMeasure.measureYTDBT  .sapzencrosstab-DataArea td.sapzencrosstab-DataCellDefault:not(:nth-child(-n+14)){display: none;}


Thank you for your help


10 |10000 characters needed characters left characters exceeded

Hi - I changed the primary tag from "ByDesign" to Design Studio

Are you using "m" mode?

Any chance you could try this with SP4?

* Please Login or Register to Answer, Follow or Comment.

3 Answers

Marco Pagliotta Jan 16, 2017 at 11:24 AM


I have installed SP4 but the error is not fixed.



10 |10000 characters needed characters left characters exceeded
Marco Pagliotta Jan 16, 2017 at 11:52 AM


i tried to show only 3 columns everytime (with radio buttons) and that kind of graphical issue disappear because there is no need of horizontal bar.

Now, if i test all the options i see always in a right way 3 columns but when i use the vertical bar the crosstab collapses in 2 columns and sometimes in no columns, There is only the dimensions!

Any advice?


10 |10000 characters needed characters left characters exceeded
Marco Pagliotta Jan 17, 2017 at 10:35 AM

i checked also with few data in order to avoid horizontal and vertical bar and it works fines, so i think it is constraint to the bars.
No idea how fix it?



10 |10000 characters needed characters left characters exceeded