CODEWITHSUNDEEP
javascripthtmlcssvue.jsquasar-framework
kzaiwo
kzaiwo

Reputation: 1768

Hide scrollbars in Quasar/Vue - overflow hidden not working

I am using Quasar/VueJS for development. How can I remove the outermost scrollbar (this is for the actual body of the page).

So annoyed that I have already tried putting overflow:hidden everywhere but it is still there. Since I have a scrollbar for my sidebar, I just dont want another scrollbar to be beside it, as it can be confusing for the user. As you can see, I am working on adding another scrollbar just beside the actual body of the page.

How can I get rid of the outermost scrollbar?

enter image description here

Codepen:

https://codepen.io/kzaiwo/pen/bGVrweM?editable=true&editors=101%3Dhttps%3A%2F%2Fquasar.dev%2Flayout%2Fdrawer

Upvotes: 1

Views: 11034

Answers (4)

Mike Smit
Mike Smit

Reputation: 87

Working with Quasar, checkout the docs, more specific this class: no-scrollbar. apply this on the element of concern.

Adding the following to your main styling will make the scroll bar go away without losing the scroll functionality:

::-webkit-scrollbar {
   display: none;
}

Be aware that this will not work for firefox and IE. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Upvotes: 3

NaturalDevCR
NaturalDevCR

Reputation: 848

You can hide the scrollbar without loosing the scroll behavior with css...

/* Hide scrollbar */
::-webkit-scrollbar {
  display: none;
}

This works on chrome for sure, probably on Safari aswell, not sure (probably not) if IE and Firefox.

Upvotes: 0

zenojunior
zenojunior

Reputation: 11

<q-layout container>

Remove container from q-layout.

<q-layout>

https://quasar.dev/layout/layout#qlayout-api

Upvotes: 1

Zumm
Zumm

Reputation: 1105

.scroll {
overflow: hidden;}

Add this class to your css

Upvotes: 1

Related Questions