vertical scrollbar

[enviel]

Overview of the problem

This is about the Bulma CSS framework

Description

vertical scrollbar always showing and the page seems always taking the whole browser so i can't get transparent behaviour i think my problem is the same as this https://github.com/jgthms/bulma/issues/100

Steps to Reproduce

as soon i called the css <link rel="stylesheet" href="css/bulma.css"> even on empty body page

Expected behavior

when using other css i got transparent background http://prntscr.com/ebv4zi

Actual behavior

http://prntscr.com/ebv586

[Technologeek]

Solution: If you're using bulma.css locally,the global definition of html tag is setting the scrollbar by default. html { background-color: white; font-size: 14px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; min-width: 300px; overflow-x: hidden; overflow-y: scroll; text-rendering: optimizeLegibility; } overflow-y : scroll; gets set by default once your html is called.

You can simply change it to overflow-y : hidden; to get rid of that default scrollbar. If you're using bulma from a cdn, call the html tag in your custom css file and set the overflow property.Like html { overflow-y: hidden; }

EDIT : I still have to go through your transparent background issues.This is a small fix to remove the default vertical scrollbar.

[enviel]

yes i actually have solved this by doing what you said and to make it transparent i just change the html background color to transparent

[jgthms]

You can use overflow-y: auto.

[rof20004]

In my project I use overflow-y: auto but not works, here is the link:

https://cadernodedespesas.firebaseapp.com

[briancodes]

@rof20004 I checked that firebaseapp link. In devtools if I changed the overflow-y:scroll to html{overflow-y: auto} it removed the vertical scrollbar

[rof20004]

Ok, I tested too, but In development I coded this, I am using vue-cli projeto, when I build to production, this code not deployed. Thanks for answer, I will investigate here.

This is my App.vue:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
html {
  overflow-y: auto
}
</style>

I do not know why this is not generate into production build with yarn build(or npm build).

Thanks and Regards.

[skirsten]

@rof20004 This is probably a bit late but in the production build the App.vue style comes before the bulma.css (App.vue is importet before bulma.css in main.js) so it will be overwritten.

You can import App.vue after bulma.css or use !important.

I just had the same problem ;)

[forno96]

I aved the same issue with Angular, fixed using html {overflow-y: auto;} in style.css and using this order in angular.json "styles": [ "node_modules/bulma/css/bulma.min.css", "src/styles.css"]

[bkarlson]

Just stumbled upon this, was unable to apply positon: sticky to any div because of overflow-y: scroll set by default.

[visalto]

Adding html { overflow-y: auto !important; } in scss file worked in my project. Please note !important. It didnt work until i included this.

[RichardJECooke]

I have blank html page. When I add Bulma it adds a scrollbar. When I saw this finally and set overflow to auto the scrollbar went away.

Why is this bug closed? A scrollbar on the page for no reason is a bug and still happening in Bulma version 0.9.4.

[jgthms]

It's to prevent pages from jumping when navigating from a page with a scrollbar to one without one, because pages would have different widths.

You can set $body-overflow-y to auto if you want.