Extending the size of Scrollbar globally across application of Cumlocity

[Harshil_Gandhi]

What product/components do you use and which version/fix level are you on?

Cumulocity latest

Is your question related to the free trial, or to a production (customer) instance?

customer instance

What are you trying to achieve? Please describe it in detail.

Our customer loves our B2B SAAS built on top of cumulocity

However as a widely frequent suggestion which is common amongst our all consumer is that ,the width of the Scorllbar of applicaiton should be bigger,as it will be more convinient for them to use

At present,Many Users struggles to find scrollbar when there is live monitoring in progress

Is it possible to extend the width of scrollbar

Do you get any error messages? Please provide a full error message screenshot and log file.

Have you installed all the latest fixes for the products and systems you are using?

[Christian_Herzog]

Hello Harshil,

I can confirm that the scrollbars are small with a width of 4px.
In the browser developer tools I was able to enlarge them temporarily to 14px, see screenshot.
But I don’t know how a way to change it permanently.

Regards, Christian

[Harshil_Gandhi]

Thanks for the answer

can you please help me to know whether it can be done permenantly?

Regards

[Christian_Guether1 (Christian Guether)]

Hi Harshil,

you need to apply a global branding and overwrite the default styling of Cumulocity’s scrollbar. There is some description available in the official documentation on how to define your own branding. You don’t need to install @c8y/style as this is already installed if you have set up your own c8y application. Create your own branding.less file and add following content to it:

@import '~@c8y/style/extend.less';

.c8y-scrollbar {
    &::-webkit-scrollbar {
        width : 40px !important;
        /* for vertical scrollbars */
        height: 40px !important;
        /* for horizontal scrollbars */
    }

    &::-webkit-scrollbar-thumb {
        width: 40px !important;
    }
}

@import '~@c8y/style/extend.less'; imports the default styling of Cumulocity, which you then extend by applying your own customized styling. In this case, the width and height of the scrollbar is set to 40px (for demo purposes).

You need to reference your branding.less in your package.json in the application options section:

"c8y": {
    "application": {
      "brandingEntry": "./branding/branding.less"
    }
}

In this example, the branding.less is located within a directory called branding.

You can find an additional example on how to apply your own branding in the c8y tutorial application:

c8ycli new my-app tutorial

Best regards
Christian

[Harshil_Gandhi]

Hi Christian

Thank you for the answer

my current application is application created on top of application builder

I only control my widgets with our current application architecture which does not allow me to access upper nodes of styling structure.

In this scenario, is it possible to use braning mentioned by you if not then can i apply styling from configuration option anywhere

Appreciating your answer…

[Sheethal_JR]

Hi Harshil,

You cannot apply styling for this from the configuration. You can clone the Application Builder source code and modify the index.less file. Steps to follow to clone and modify the source code.

1. Clone from Souce Code
2. Run npm i
3. Add the css mentioned above by Christian in index.less file.
4. Run npm build command to build the file. This will create zip file and zip file will be present under /dist folder.
5. You can upload the zip file in your tenant by going to Administration->Ecosystem->Applications-> Application Builder.

Kindly let me know if you are facing any issue.

Regards,
Sheethal J R