Content
View differences
Updated by Henriette Darge almost 4 years ago
There are currently a number of different scrollbar implementations within OpenProject. The most notable difference is between native OS scrollbars and custom ones. Whilst the difference are sometimes minor and unnoticable (on a Mac, for example, that by default hides scrollbars until one starts scrolling), they can sometimes be jarring, especially in Windows, where the native ones are noticably thicker and clunkier than the custom development.
In certain situations (again in Windows, primarily), the presence of scrollbars can sometimes _push_ content by a few pixels, leading to alignment issues.
This feature aims to unify all scrollbars for a user, for their OS and browser.
### Related
Note: There is a separate work package to unify scrollbars _across_ OSes and browsers: <mention class="mention" data-id="43028" data-type="work_package" data-text="#43028">#43028</mention>.
### **Acceptance criteria**
* When using **one browser:** All scrollbars in OpenProject look and behave consistently. This includes in:
* Work package lists
* Team planner
* Modals
* Main search bar results
* Project list
* Sidebar
* Split screen tabs
* ...
* The custom scrollbar will only be visible when actually hovering the container and starting to on scroll start (similar to on Mac)
* The scrollbar will not "take" any space or require any additional margin and padding; it will simply float on top.
### Examples
Some inconsistencies.
#### Firefox on Mac OS 12.4
_Filter selection dropdown:_
<figure class="image op-uc-figure" style="width:50%;"><div style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34461/content"></div></figure>
_Sidebar:_
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34464/content"></div></figure>
_Team planner:_
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34462/content"></div></figure>
_Main project select dropdown:_
<figure class="image op-uc-figure" style="width:50%;"><div style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34463/content"></div></figure>
**Technical note:**
* We use a sass-mixin `styled-scrollbar` to style the scrollbar. This mixin is currently not used throughout the whole application.
* So probably a global rule for all elements to use the mixin should cover most of the cases.
In certain situations (again in Windows, primarily), the presence of scrollbars can sometimes _push_ content by a few pixels, leading to alignment issues.
This feature aims to unify all scrollbars for a user, for their OS and browser.
### Related
Note: There is a separate work package to unify scrollbars _across_ OSes and browsers: <mention class="mention" data-id="43028" data-type="work_package" data-text="#43028">#43028</mention>.
### **Acceptance criteria**
* When using **one browser:** All scrollbars in OpenProject look and behave consistently. This includes in:
* Work package lists
* Team planner
* Modals
* Main search bar results
* Project list
* Sidebar
* Split screen tabs
* ...
* The custom scrollbar will only be visible when actually hovering the container and starting to
* The scrollbar will not "take" any space or require any additional margin and padding; it will simply float on top.
### Examples
Some inconsistencies.
#### Firefox on Mac OS 12.4
_Filter selection dropdown:_
<figure class="image op-uc-figure" style="width:50%;"><div
_Sidebar:_
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34464/content"></div></figure>
_Team planner:_
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34462/content"></div></figure>
_Main project select dropdown:_
<figure class="image op-uc-figure" style="width:50%;"><div
**Technical note:**
* We use a sass-mixin `styled-scrollbar` to style the scrollbar. This mixin is currently not used throughout the whole application.
* So probably a global rule for all elements to use the mixin should cover most of the cases.