# Extending the size of Scrollbar globally across application of Cumlocity

**URL:** <https://community.cumulocity.com/t/extending-the-size-of-scrollbar-globally-across-application-of-cumlocity/7443>\
**Category:** Forum\
**Tags:** analytics, device-connectivity, cumulocity\
**Created:** [February 7, 2023, 9:26am UTC](https://community.cumulocity.com/t/extending-the-size-of-scrollbar-globally-across-application-of-cumlocity/7443 "2023-02-07T09:26:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Harshil\_Gandhi](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/harshil_gandhi/32/6222_2.png) [@Harshil\_Gandhi](https://community.cumulocity.com/u/Harshil_Gandhi)\
**Post date:** [February 7, 2023, 9:26am UTC](https://community.cumulocity.com/t/extending-the-size-of-scrollbar-globally-across-application-of-cumlocity/7443/1 "2023-02-07T09:26:58Z")

</div>

#### 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

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/a/5/a51504f96845f3ac95b3789f0ab991655d2ad3b8.png)

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?

---

<div class="post-metadata">

**Author:** ![Christian\_Herzog](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/christian_herzog/32/32209_2.png) [@Christian\_Herzog](https://community.cumulocity.com/u/Christian_Herzog)\
**Post date:** [February 7, 2023, 10:14am UTC](https://community.cumulocity.com/t/extending-the-size-of-scrollbar-globally-across-application-of-cumlocity/7443/2 "2023-02-07T10:14:13Z")

</div>

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

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/9/a/9a7e6a2ec3755f6b50a82f57457aad3b2e898eac.png)

---

<div class="post-metadata">

**Author:** ![Harshil\_Gandhi](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/harshil_gandhi/32/6222_2.png) [@Harshil\_Gandhi](https://community.cumulocity.com/u/Harshil_Gandhi)\
**Post date:** [February 7, 2023, 2:43pm UTC](https://community.cumulocity.com/t/extending-the-size-of-scrollbar-globally-across-application-of-cumlocity/7443/3 "2023-02-07T14:43:04Z")

</div>

Thanks for the answer

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

Regards

---

<div class="post-metadata">

**Author:** ![Christian\_Guether1](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/christian_guether1/32/14848_2.png) [@Christian\_Guether1](https://community.cumulocity.com/u/Christian_Guether1)\
**Post date:** [February 8, 2023, 8:15am UTC](https://community.cumulocity.com/t/extending-the-size-of-scrollbar-globally-across-application-of-cumlocity/7443/4 "2023-02-08T08:15:19Z")

</div>

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](https://cumulocity.com/guides/web/application-configuration/#prerequisites) 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:

```css
@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:

```json
"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:

```auto
c8ycli new my-app tutorial

```

Best regards  
Christian

---

<div class="post-metadata">

**Author:** ![Harshil\_Gandhi](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/harshil_gandhi/32/6222_2.png) [@Harshil\_Gandhi](https://community.cumulocity.com/u/Harshil_Gandhi)\
**Post date:** [February 17, 2023, 9:39am UTC](https://community.cumulocity.com/t/extending-the-size-of-scrollbar-globally-across-application-of-cumlocity/7443/5 "2023-02-17T09:39:57Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Sheethal\_JR](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@Sheethal\_JR](https://community.cumulocity.com/u/Sheethal_JR)\
**Post date:** [February 17, 2023, 12:01pm UTC](https://community.cumulocity.com/t/extending-the-size-of-scrollbar-globally-across-application-of-cumlocity/7443/6 "2023-02-17T12:01:34Z")

</div>

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](https://github.com/Cumulocity-IoT/cumulocity-app-builder)
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

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/system/32/31990_2.png) [@system](https://community.cumulocity.com/u/system)\
**Post date:** [August 16, 2023, 12:02pm UTC](https://community.cumulocity.com/t/extending-the-size-of-scrollbar-globally-across-application-of-cumlocity/7443/7 "2023-08-16T12:02:13Z")

</div>

Closed on August 16, 2023, 12:02pm UTC

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.