cancel
Showing results for 
Search instead for 
Did you mean: 

Alternate Row Color,Scroll Bar And Thumb Css In DS1.6

SATHISH_BTP
Participant
0 Kudos

Hi Expert's,

I have Requirement To Change Alternate Row Colour Change ,Scroll Bar And Thumb of  Score Card In Sap Design Studio I have Written CSS for Alternate Colour but It is effecting for Header Row's Only Not Effecting for Data Row's.For Cross By using Css I am getting Alternate Row colour's.

CSS I have written for alternate row color:

.sapUiTableRowHdr:nth-child(odd), .sapUiTableCtrl tr.sapUiTableRowEven {

    background-color: #CCFFCC !important;

}

.sapUiTableRow:nth-child(odd), .sapUiTableCtrl tr.sapUiTableRowEven {

    background-color: #ff0000!important;

}

.sapUiTableCtrl tr.sapUiTableRowEven {

    background-color: #ff0000!important;

}

I have Written CSS for scroll bar and scroll bar thumb But It is effecting for both score Card and Cross tab.

CSS for Scroll Bar and Thumb :

.sapXTableMain,.sap-desktop ::-webkit-scrollbar-thumb {

    background-color: #007cc0;

}

.sap-desktop ::-webkit-scrollbar {

  

    background-color: #DA1242;

}

Colud you Please Help On this And provide CSS Classes of Score Card It will helpful  for further .

I have Searched But I didn't find Any solution for this.

Best Regard's,

Sathish.

Accepted Solutions (1)

Accepted Solutions (1)

former_member194504
Active Contributor
0 Kudos

Hi Sathis Babu,

Instead of this css

.sapUiTableRowHdr:nth-child(odd), .sapUiTableCtrl tr.sapUiTableRowEven {

    background-color: #CCFFCC !important;

}

try to be specific to the component for example it would be something like this

#YOURCOMPONENTNAME .sapUiTableRowHdr:nth-child(odd), .sapUiTableCtrl tr.sapUiTableRowEven {

    background-color: #CCFFCC !important;

}

So that, it will affect only the component you mention.

Thanks,

Nithyanandam

SATHISH_BTP
Participant
0 Kudos

Hi Venu,

For Alternate Row Colour I have Written CSS  for both Both Cross tab and Score Card For Cross tab It's Working Fine But for Score Card It Effecting Only Header Row's.screen shot attached for reference.

for this i have written CSS

sapUiTableRowHdr:nth-child(odd), .sapUiTableCtrl tr.sapUiTableRowEven {

    background-color: #CCFFCC !important;

}

.sapUiTableRow:nth-child(odd), .sapUiTableCtrl tr.sapUiTableRowEven {

    background-color: #ff0000!important;

}

.sapUiTableCtrl tr.sapUiTableRowEven {

    background-color: #ff0000!important;

}

It's not Effecting Row's Kindly See the below screen shot.

2.I want to change Scroll bar and Thumb colour of score card only but it's effecting for Cross Tab also I have Written following Css

.sapXTableMain,.sap-desktop ::-webkit-scrollbar-thumb {

    background-color: #007cc0;

}

.sap-desktop ::-webkit-scrollbar {

  

    background-color: #DA1242;

}

former_member194504
Active Contributor
0 Kudos

Try this

.sapUiTableRowEven div.sapXTableCellWrapperTop{

  background-color:yellow !important;

}

.sapUiTableRowOdd div.sapXTableCellWrapperTop{

  background-color:orange !important;

}

Thanks,

Nithyanandam

SATHISH_BTP
Participant
0 Kudos

Hi Venu,

Thanks, Could you Please Provide Score Card  CSS Classes for future Use like with reference to my post the second issue i.e scroll bar and thumb colour change. how to implement for score card don't effect to other components but here it effecting to cross tab also.

Best Regard's,

Sathish.

former_member194504
Active Contributor
0 Kudos

Hi Sathish,

I don't think you can specifically mention for scrollbar CSS. You can find the classes by inspecting using F12 in chrome developer tool.

Thanks,

Nithyanandam

Answers (0)