Bulma: Double scroll bar

Created on 22 Jul 2017 · 4Comments · Source: jgthms/bulma

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.4.3]
My browser is: Chrome 59.0.3071.115 on Windows 10
I am sure this issue is not a duplicate? Yes

Description

In version 0.4.3, the body shows a second scrollbar. This issue doesn't happen on version 0.4.2.

Steps to Reproduce

JS Bin example.

Expected behavior

Only browser window scroll. Question: why a scroll bar appears even the body content not reached the window height?

Source

nicolashuber

Most helpful comment

After checking for changes in 0.4.3 from 0.4.2 it turns out it's caused by add overflow-x: hidden to body selector from generic.sass from this commit 962c922 from #828. A possible solution

body {
  overflow-x: visible;
}

Although I fear that might adverse effects. A better solution will be to remove it entirely as it was in 0.4.2

noxecane on 22 Jul 2017

👍5

All 4 comments

After checking for changes in 0.4.3 from 0.4.2 it turns out it's caused by add overflow-x: hidden to body selector from generic.sass from this commit 962c922 from #828. A possible solution

body {
  overflow-x: visible;
}

Although I fear that might adverse effects. A better solution will be to remove it entirely as it was in 0.4.2

noxecane on 22 Jul 2017

👍5

I solve with:

html {
  overflow: inherit
}

alexsandro-xpt on 22 Jul 2017

👍2 🚀1 🎉1

Why the tag html needs overflow property?

html {
  overflow-x: hidden;
  overflow-y: scroll;
}

I know that overflow-x property is to prevent horizontal scroll, but why overflow-y: scroll? This ends up creating a scrollbar even though the content of the page does not need.

nicolashuber on 23 Jul 2017

This is fixed in 0.4.4.