on 09-16-2014 4:43 PM
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
Try adding line-height : 30px to these following two CSS selectors:
.myCrosstab .sapzencrosstab-DataCellDefault
and
.sapzencrosstab-DataCellAlternating
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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 */
}
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
User | Count |
---|---|
87 | |
23 | |
11 | |
9 | |
8 | |
5 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.