cancel
Showing results for 
Search instead for 
Did you mean: 

Vertical Alignment of data cells in a crosstab with CSS

Former Member
0 Kudos

Hello,

I already searched all relevant topics and discussions but I couldn't find a solution for the following problem:

I applied some formatting to my crosstabs and everything is like I want it to be now, except for the vertical alignment of data cells (measures). This is different to data coming from dimension fields. In the image below

I already tried to include the alignment statement in my CSS, but it didn't help .This is all the CSS that I am using for the Crosstabs:

.myCrosstab .sapzencrosstab-TableDiv {
border: 0px;}

.myCrosstab .sapzencrosstab-VScrollTable {
border: 0px;}

.myCrosstab .sapzencrosstab-HScrollTable {
border: 0px;}

.myCrosstab .sapzencrosstab-HeaderCellDefault

,.myCrosstab .sapzencrosstab-DataCellDefault {
border: 0px !important;
border-bottom: 1px solid #dddddd !important;}

.myCrosstab .sapzencrosstab-DataCellAlternating

,.myCrosstab .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellAlternating {background: #F7F7F7 !important;}

.sapzencrosstab-DimensionHeaderArea, .sapzencrosstab-ColumnHeaderArea {font-size: 16px;
color: #444444;
}   

.myCrosstab .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderRow {font-size: 16px;
color: #444444;
}

.myCrosstab .sapzencrosstab-DataArea .sapzencrosstab-DataCellDefault {font-size: 16px;
color: #444444;
vertical-align: middle;
}

/*
.myCrosstab{
background-color: #F7F7F7 !important;
font-family: Arial !important;
font-size: 16px !important;
color: #444444 !important;
text-align: left !important;
vertical-align: middle; 
}
*/
.myCrosstab .sapzencrosstab-TableDivBackground {
background-color: #F7F7F7;
border: 0px;}

.myCrosstab * .sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellDefault, 
.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellAlternating, 
.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellAlternating, 
.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellDefault,
.sapzencrosstab-DataCellDefault .sapzencrosstab-TableDiv,
.sapzencrosstab-DataArea .sapzencrosstab-RowHeaderArea,
.sapzencrosstab-DataCellDefault .sapzencrosstab-DataCellContentDiv,
.sapzencrosstab-DataCellAlternating {
height: 30px !important;
font-family: Arial !important;
font-size: 16px !important;
color: #444444 !important;
text-align: left !important;
vertical-align: middle !important;  
background-image: none !important; 
background-color: #F7F7F7 !important;
border: 0px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7F7F7', endColorstr='#F7F7F7') !important; /* For IE users */ 

Thank you in advance,

Jan

Accepted Solutions (1)

Accepted Solutions (1)

mike_howles4
Active Contributor
0 Kudos

Try adding line-height : 30px to these following two CSS selectors:

.myCrosstab .sapzencrosstab-DataCellDefault

and

.sapzencrosstab-DataCellAlternating

Former Member
0 Kudos

Hi Michael, thank you for your reply.

Do you mean like this? Unfortunately this does not change the appearance.

.myCrosstab .sapzencrosstab-TableDiv {
border: 0px;}

.myCrosstab .sapzencrosstab-VScrollTable {
border: 0px;}

.myCrosstab .sapzencrosstab-HScrollTable {
border: 0px;}

.myCrosstab .sapzencrosstab-HeaderCellDefault

,.myCrosstab .sapzencrosstab-DataCellDefault {
border: 0px !important;
line-height: 30px !important;
border-bottom: 1px solid #dddddd !important;}


.myCrosstab .sapzencrosstab-DataCellAlternating{
line-height: 30px !important;
}

.myCrosstab .sapzencrosstab-DataCellDefault {
line-height: 30px !important;
}

.myCrosstab .sapzencrosstab-DataCellAlternating

,.myCrosstab .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellAlternating {background: #F7F7F7 !important;}

.sapzencrosstab-DimensionHeaderArea, .sapzencrosstab-ColumnHeaderArea {font-size: 16px;
color: #444444;
}   

.myCrosstab .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderRow {font-size: 16px;
color: #444444;
}

.myCrosstab .sapzencrosstab-DataArea .sapzencrosstab-DataCellDefault {font-size: 16px;
color: #444444;
vertical-align: middle;
}

/*
.myCrosstab{
background-color: #F7F7F7 !important;
font-family: Arial !important;
font-size: 16px !important;
color: #444444 !important;
text-align: left !important;
vertical-align: middle; 
}
*/
.myCrosstab .sapzencrosstab-TableDivBackground {
background-color: #F7F7F7;
border: 0px;}

.myCrosstab * .sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellDefault, 
.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellAlternating, 
.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellAlternating, 
.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellDefault,
.sapzencrosstab-DataCellDefault .sapzencrosstab-TableDiv,
.sapzencrosstab-DataArea .sapzencrosstab-RowHeaderArea,
.sapzencrosstab-DataCellDefault .sapzencrosstab-DataCellContentDiv,
.sapzencrosstab-DataCellAlternating {
height: 30px !important;
font-family: Arial !important;
font-size: 16px !important;
color: #444444 !important;
text-align: left !important;
vertical-align: middle !important;  
background-image: none !important; 
background-color: #F7F7F7 !important;
border: 0px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7F7F7', endColorstr='#F7F7F7') !important; /* For IE users */ 

mike_howles4
Active Contributor
0 Kudos

Yes

Former Member
0 Kudos

Hi Jan,

in general what I would suggest is to also look for css related answers on stackoverflow:

Posts containing 'vertically align text' - Stack Overflow

You can usually find all your answers there with explanations and examples.

What Mike meant is or why he wrote to set the line-height property to the number 30px is that he saw that you are setting the height to 30px. So basically, you need to use line-height: 30px in the same place where you are also using height: 30px.

So if you are using/setting "height" and you want to vertically align text, you need to use "line-height" too and set it to the same number.

Regards

David

mike_howles4
Active Contributor
0 Kudos

Thanks for elaborating, David.  I get so busy that I'll just throw a brief answer but it might seem cryptic or without explanation. 

Former Member
0 Kudos

Your welcome

From time to time I like to explain the answers for the easy questions.

Answers (0)