Nextcloud scrollbar too thin in Chrome

đŸ’» Development
1

Hello!

I noticed the scrollbar in Chrome web browser is way to small/thin in Nextcloud. It’s looks good in IE and Firefox tho.

When browsing other websites in Chrome it does’nt give you the small/thin scrollbar.

I found a an extension on Google Chrome App Store to force a different scrollbar which I could actually SEE. But that should not have to be the solution.

Maybe fix this in the next release? =)

Thanks
Garry

2

for you @jan

And if you don’t get an answer, you can directly post this on github (in this case don’t forget to link there and mark it as solution).

3

We do this on purpose because there are some scrollbars in the middle of the page, such as for the left navigation, and for the contacts or emails list in the Contacts / Mail app. The default scrollbar looks very disruptive there.

4

Hi, I’d just like to add that there is no scrollbar on the right side at all in the gallery view in Chrome. It works fine in Firefox.

5

Please post this to github, add perhaps a screenshot. The interface should look similar in all browsers.

6

TL;DR

There is an easier/better solution at the end of this post

Hi. Sorry to wake this topic, but we still have this problem.
I have also found a workaround, added below.

@Poisony, what extension did you use?
I tried ScrollbarCustomizer (SbC) but it didn’t change the scrollbar on our Nextcloud (works on other sites).

A lot of users complain about the small scrollbar with no arrows.
Many users even migrated to Firefox just so they can have a “usable” scrollbar.
It would be great to have a way to disable the thin scrollbar.

It is also fine on smaller menus on firefox even with the full size scrollbar (not disruptive?).

Most users that complain are people that can’t see very well.
So this goes as a usability problem that makes disabled people have a poor experience.

I also miss the arrows on most modern bars.
To me, replacing a usable arrow with a useless blank space can never be better.
This is even more important when you have several scrollbars (no granularity).
What I really can’t understand is why we can’t have the option to enable all that stuff back to its former glory.

I was almost posting this when I found this github issue about making the bars bigger when hovering it. That is not really a solution for us (we want it always big), but that pointed me where the scrollbar css is set. With that I decided to try and change it with a custom theme. And that works fine.

How I changed the default scrollbar size with theming

enter NC dir

cd /var/www/nextcloud

create new theme dir

sudo -u www-data mkdir -p themes/mytheme/core/css

create styles file with new config

# For NC12 or newer
sudo -u www-data nano themes/mytheme/core/css/server.css

# For NC11 or older (not tested)
sudo -u www-data nano themes/mytheme/core/css/styles.scss

I have just made the bars wider adding this, you can adjust the size

::-webkit-scrollbar {
        width: 12px;
        height: 12px;
}

Then activate the theme on config.php

sudo -u www-data nano config/config.php

Add/Edit (check if you already have an empty theme set, I had)

'theme' => 'themename(folder name)',

Then reloaded my NC page and it was working!

The original core/css/styles.scss currently have this as defaults for scrolling

/* SCROLLING */

::-webkit-scrollbar {
        width: 5px;
        height: 5px;
}

::-webkit-scrollbar-track-piece {
        background-color: transparent;
}

::-webkit-scrollbar-thumb {
        background: nc-darken($color-main-background, 14%);
        border-radius: $border-radius;
}

If you already have a theme you should obviously add to it, instead of creating a new one.

Tested on NC 13.0.4 and Chrome 68.0.3440.106 (Win 64bit).

Now they only complain they can’t see the light-gray stuff on top of white :slight_smile:
I guess I need a full theme for vision-impaired people.

EDIT

The new/better solution

I am currently back to the stock theme and using

I then just add the custom CSS at the Configuration > Theming page.

This is my current config for people who can’t see very well.
Remove the stuff you don’t need, paste there, hit save, you’re golden.

/***************************************************
   Mod login page
   + stronger shadows
****************************************************/

p.info, .remember-login-container, .lost-password-container {
    text-shadow: 0 0 12px rgba(0, 0, 0, 1);
}

input[type="checkbox"].checkbox--white + label::before {
    border-color: #fff;
}



/***************************************************
   Mod Scroll Bar Chrome 
   + arrows
   + wider scrollbar
****************************************************/

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-button {
    background-color: #dbdbdb;
    background-size: 8px 7px;
    background-repeat: no-repeat;
    background-position: center center;
    height: 16px;
    width: 14px;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb {
   background: #dbdbdb;
   -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

::-webkit-scrollbar-button:end:increment {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQwNC4zMDggNDA0LjMwOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDA0LjMwOCA0MDQuMzA5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTAsMTAxLjA4aDQwNC4zMDhMMjAyLjE1MSwzMDMuMjI5TDAsMTAxLjA4eiIgZmlsbD0iIzAwMDAwMCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

::-webkit-scrollbar-button:start:decrement {
   background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDI1NSAyNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NSAyNTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iYXJyb3ctZHJvcC11cCI+CgkJPHBvbHlnb24gcG9pbnRzPSIwLDE5MS4yNSAxMjcuNSw2My43NSAyNTUsMTkxLjI1ICAgIiBmaWxsPSIjMDAwMDAwIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==)
}



/***************************************************
   Mod calendar
   + darker lines
   + darker fonts
   + bigger fonts
   + some bold fonts
****************************************************/

.fc-unthemed tr td {
    border-top-color: #999;
}

.fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-popover {
    border-color: #999 !important;
}

.fc th, .fc .fc-axis, .fc-day-grid-event .fc-time, .fc-ltr .fc-basic-view .fc-day-number, .fc-ltr .fc-basic-view .fc-week-number, .fc-time-grid-event .fc-time {
    opacity: 1;
    font-size: 1.060em;
}

#fullcalendar .fc-axis, #fullcalendar .fc-day-header {
    opacity: 0.85;
    line-height: 2em;
    font-weight: bold;
    font-size: 1.060em;
}

#fullcalendar .fc-axis {
    font-size: 0.98em;
}

.fc-day-top.fc-other-month {
    opacity: .45;
}

.fc-unthemed tr:nth-child(2n) td {
    border-top-color: #bbb;
}

.fc-unthemed td.fc-today {
    border-right: 1px solid #999 !important;
}

input.ng-untouched {
    border-top: 1px solid #ababab;
    border-right: 1px solid #ababab;
    border-bottom: 1px solid #ababab;
}

select, button, .button, input:not([type="range"]), textarea, div[contenteditable="true"], .pager li a {
    border: 1px solid #ababab;
}

/* this is fixed to Nextcloud's blue, change if needed */
textarea.events--textarea:focus, textarea.events--textarea:hover {
    border: 1px solid #0082c9 !important;
}



/***************************************************
   Mod Left Bar
   + Config button
   + Left bar division
****************************************************/

#app-settings {
    border-top: 1px solid #ccc;
}

#app-navigation, #app-settings-content, #app-settings-header {
    border-right: 1px solid #ccc;
}



/***************************************************
   Mod Files App 
   + darker progress bar
   + darker file/folder mouse hover
****************************************************/

progress {
    background-color: #ccc ! important;
}

#filestable tbody tr:hover {
    background-color: #dfdfdf !important;
}



/***************************************************
   Mod Config Pages
   + Taller CSS textarea
****************************************************/

#theming-customcss textarea {
    height: 500px;
}

Cheers!
Gus

1 Like
7

Thanks a lot. Working well with NC 18 as well

8

It seems that some of the CSS is not applied in NC 20, especially the Calendar part, while the scroll bars appear as they supposed to

9

After unsuccessful trying with Custom CSS to DISABLE scrollbar style, not useless programming my own scrollbar while native one is fine in every place of NC as other sites,
I have made very simple change to the file
‘nextcloud/core/css/styles.scss’
where style definition is now surrounded with /*...*/.