Optionally reset Semantic.UI -webkit-scrollbar styles

[metnew]

Optionally reset Semantic.UI -webkit-scrollbar styles

[Metnew]

I figured out that it's not a right/bottom margin - it's a scrollbar, created by overflow-y: scroll!important;. But I still can't understand how two identical apps can render differently.

UPD1: Looks like the issue was caused by Semantic-UI latest version. They moved from normalize.css 3.0.1 to normalize.css 7.0.0.

UPD2: Just found the problem: in [email protected](July 11) was added:

body ::-webkit-scrollbar {
    width: 10px;
  }

So by default size of the scrollbar is 10px.
You can quickly patch this with:

body ::-webkit-scrollbar {
    width: 0px;
  }

[PharrellWANG]

@TheDolo
I have the same issue here. One of my Macs is behaving fine when displaying the app via Chrome, the other iMac has the same issue as yours. Why is it?

[Metnew]

@TheDolo @PharrellWANG Thanks for the report, I'll check this issue later, currently working on advanced images preprocessing.

Heh, this removes the scroll bar for me lol! The bottom margin is still visible with the above too.

[Metnew]

Just change in src/common/containers/App/style.jsx
from:

export const SidebarSemanticPusherStyled = styled(Sidebar.Pusher)`
	height: 100%;
  overflow: scroll!important;
 -webkit-overflow-scrolling: touch;

to:

export const SidebarSemanticPusherStyled = styled(Sidebar.Pusher)`
	height: 100%;
        overflow-y: scroll!important;
        -webkit-overflow-scrolling: touch;

This fixes will be in the next minor version, sorry for no updates for so long

This fixes the bottom bar for me, however the right bar still does not auto hide (like the demo), and has a background color that is different from the rest of the page (part of the auto hide problem, like in the pictures above).

Thank you!

[Metnew]

did you insert code from this comment into your styles?

The scrollbar is no longer visible when scrolling across the entire app for all components when I insert that into global.jsx, but the background color is gone. I also tested on a fresh clone, same result.

[Metnew]

It's because some semantic's style still aren't reseted. Will be fixed too

[Metnew]

@TheDolo probably fixed in 364fa41

:( I have no scrollbar on both dev and build, but I can still scroll. I don't get why your online demo is fine! Shift refresh doesn't help. I dug up these up though!

https://github.com/Semantic-Org/Semantic-UI-React/blob/master/docs/app/Components/DocsLayout.js#L55

https://github.com/Semantic-Org/Semantic-UI-React/blob/master/docs/app/Components/Sidebar/Sidebar.js

Edit: No scrollbar on demo site too, sometimes. yea something is up with refresh/resetting ugh.

[Metnew]

@TheDolo, sorry can investigate your issue only in next 45 minutes :(

Doesn't need to be today! It probably affects everyone using this boilerplate, I'd be grateful for any fix any time you can for this one!

Edit: *I said sidebar, I mean't the right body scrollbar is missing with this code (but I understand why you do this line!)

body ::-webkit-scrollbar {
    width: 0px;
  }

[Metnew]

@TheDolo oh, I've just understood that you meant scrollbar, I didn't understand how sidebar can disappear from the page :)
Currently, I find only 3 ways to fix this problem:

1. use custom semantic.css build (bad solution)
2. use this scrollbar (bad solution)
3. hide scrollbar at all (right now the best solution)
   I continue to investigate this issue, probably there is any better solution than just hide this.

[Metnew]

Hi @TheDolo @PharrellWANG
I can't reproduce the issue, is it still actual?

[Metnew]

Looks like scrollbar styles were removed from SUI core

[Duder-onomy]

Boom! This thread just saved my butt.

[Metnew]

@Duder-onomy 👍