[Solved] v0.15 Scrollbar Appears Even if the Window Does Not Overflow

snowdrop

Good day. I just noticed that after I upgraded from v0.14.9 to v.0.15, a scrollbar now appears even if the window does not overflow. The scrollbar disappears though when a dialog/modal is displayed. Here are the screenshots:

I’ve tried researching but still can’t find any solution. The layout looks like this:

<q-layout view="hHh Lpr lFf">
    <dashboard-header></dashboard-header>
    <dashboard-left-drawer></dashboard-left-drawer>
    <dashboard-right-drawer></dashboard-right-drawer>

    <q-page-container>
        <transition
        appear
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
        mode="out-in"
        :duration="200">
            <router-view/>
        </transition>
    </q-page-container>
</q-layout>

Any idea what might be causing this?

Sweetyy

Hi @snowdrop ,

When you have no modal open, isn’t it because of a padding or margin in your container that you have this scrollbar ?

But when you open a modal it’s totally normal the scrollbar disappears because of this CSS wich is automatically added to the body.

body.with-modal {
    overflow: hidden !important;
}

The modal is in position fixed and over everything with a z-index and so no need to have a scrollbar on the body because it’s the content of the modal itself that is scrollable.

Hope it helps !

snowdrop

@Sweetyy I’m not sure about that but I’ve tried removing all other container and what letting one of the components stay (so that it won’t be completely blank page) but the scroll still appears. One of the container has it’s bottom portion on half of the page already to determine if it still overflows, but to no avail. Seems that any children of q-layout has scrollbar on it.

snowdrop

@Sweetyy I think what you said is true. What I noticed is even if the page with a padding/margin that might cause it to scroll is destroyed, the scroll still appears in some of the pages. At least I know this is not a problem with the quasar template itself. Thanks!!

Sweetyy

@snowdrop you’re welcome ! I’m glad it helped you

snowdrop

@Sweetyy I now discovered the true culprit. seems that the quasar template adds a min-height: 100vh; on both the <body></body> and <q-layout></q-layout>. Adding a style="min-height: 0px" on both the tags fixed the problem, though I don’t know the side effect of overriding the min-height.

Sweetyy

@snowdrop well i never had to edit this property. Let us know if you get any trouble in the interface because of that

snowdrop

@Sweetyy cool. thanks!

stuartcusack

I can confirm a similar fix to snowdrop’s. I get a vertical scrollbar when using a html table that only overlaps horizontally within a q-page. I think this is something to do with Quasar’s implementation of 100vh and scrollbar heights, and I’ve only seen it happen when using tables.

Problem is solved if I wrap my tables in overflow divs:

<div style="position: relative; overflow: auto; max-width: 100%; ">
	<table>// Table Content</table>
</div>

By the way I tried all kinds of solutions by altering the q-layouts and q-pages styles but I ran into trouble with transitions and other things. Best off not messing with the quasar layout elements too much.

No More Posting New Topics!

[Solved] v0.15 Scrollbar Appears Even if the Window Does Not Overflow