Custom Scrollbars in SAP Design Studio

Posted by Xavier Hacking

As we have seen in an earlier post we can enhance the looks of our SAP BusinessObjects Design Studio applications with the use of some CSS coding. In this post I will show you how to add scrollbars to Design Studio components and how to change the looks of them. The result of an adjusted Text component will look like this:

Some components, like the Crosstab or the Filter Panel component will activate horizontal and/or vertical scrollbars themselves when there is not enough room to display all the data. The Text component doesn’t do this and just simply expands vertically. The height setting in the component’s layout properties has no effect on this anymore.

scollbar1

To add a scrollbar to any component we have to use the following piece of CSS code to add them either to the vertical or the horizontal axis:

overflow-y:scroll;
overflow-x:scroll;

Or for scrollbars on both axes in just one line of code:

overflow:scroll;

The Text component looks like this after adding the CSS code:

scollbar2

Now we have activated the scrollbar we are going to customize it. Since it is kingsday today in Holland and, more important, I like the orange color, I decided to make it an orange scrollbar. We adjust the colors of seven parts of the scrollbar. In the image below they are explained.

scrollbar-3dlight-color: grey;
scrollbar-arrow-color: white; 
scrollbar-dark-shadow-color: black;
scrollbar-highlight-color: white;
scrollbar-shadow-color: grey;
scrollbar-base-color: orange;
scrollbar-track-color: white;

scollbar4

So to conclude I put all CSS in a single class in the Custom CSS file and set this class name (scroll) in the Display –> CSS Class property of the Text component in Design Studio. The screenshot below the code shows the result. GLHF!

.scroll {
overflow-y:scroll;
scrollbar-3dlight-color: grey;
scrollbar-arrow-color: white; 
scrollbar-dark-shadow-color: black;
scrollbar-highlight-color: white;
scrollbar-shadow-color: grey;
scrollbar-base-color: orange;
scrollbar-track-color: white; 
}

scollbar3

HackingSAP.com - Apr 26, 2014 | DIY, Knowledge sharing, SAP BusinessObjects Design Studio
Tagged | ,

1 comment

  1. Jean-Guillaume
    May 22, 2015

    Hello,
    I used your technique. I can see the scroll bar, but it is useless as it doesn’t change when you hide/show a component during navigation.
    I tried it on Chrome and IE. Is there a way to correct this (css?)?

    Thanks and Regards,
    Jean-Guillaume

    Reply

Leave a Reply

Your email address will not be published.