Optionally reset Semantic.UI -webkit-scrollbar styles

[ghost]

I'm submitting a ...

• bug report
• feature request

Bug Report:

Bottom and right margin in built version vs demo version online.

• What is the expected behavior?

Margins like the demo.

• What is the current behavior?

• Steps to reproduce:

Git clone, npm install, npm run dev

Useful Info:

• Your environment:

  • Node version: Node 6.11.1
  • Browser: Latest Chrome
  • OS: OSX
  • Language/Platform/etc:

• Other information

Thank you :) I've been using this boilerplate extensively, just the perfect balance of not too much and just enough :)

[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.

[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 Semantic.UI@2.2.11(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;
  }

[ghost]

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

[ghost]

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?

[ghost]

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

[ghost]

:( 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 :(

[ghost]

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 👍