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



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

    0_1520236952733_Screenshot_20180305_155157.png

    1_1520236952734_Screenshot_20180305_155248.png

    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?



  • 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 !



  • @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.



  • @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!!



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



  • @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. 🙂



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



  • @Sweetyy cool. thanks!