Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

QDrawer shows white overlay footer when I scroll down

See original GitHub issue

I got this issue when scrolling down my app with QDrawer. I tried different ways but it still shows the overlay footer. Below is my code

        <q-drawer
            v-model="rightDrawerOpen"
            side="right"
            :width="drawerWidth"
            overlay
            elevated
            no-swipe-open
            content-class="bg-grey-1"
            behavior="mobile"
        >
            <div class="md:hidden absolute" :style="'top: 0px; left: -65px'">
                <q-btn
                    unelevated
                    color="primary"
                    icon="fal fa-times"
                    class="p-2 text-sm lg:text-3xl rounded-none text-light"
                    @click="rightDrawerOpen = false"
                />
            </div>
            <div class="hidden md:block xl:hidden absolute" :style="'top: 0px; left: -80px'">
                <q-btn
                    unelevated
                    color="primary"
                    icon="fal fa-times"
                    class="p-3 text-sm lg:text-3xl rounded-none text-light"
                    @click="rightDrawerOpen = false"
                />
            </div>
            <div class="hidden xl:block absolute" :style="'top: 0px; left: -90px'">
                <q-btn
                    unelevated
                    color="primary"
                    icon="fal fa-times"
                    class="p-1 text-sm lg:text-3xl rounded-none text-light"
                    @click="rightDrawerOpen = false"
                />
            </div>
<!--            <q-scroll-area class="fit">-->
            <div>
                <div v-if="request_loading" class="p-base">
                    <default-loading/>
                </div>
                <div v-else>
                    <client-profile v-if="clientProfileOpen" :client_id="selected_request.client_id"></client-profile>
                    <div v-else-if="requestDetailsOpen">
                        <request-summary v-if="selected_request" :request="selected_request" :target_timestamp="selected_request.proposal_window_closes_at"/>
                    </div>
                    <div v-else-if="completeProposalViewOpen">
                        <proposal-complete-view :proposal="selected_proposal" :property-types="property_types"/>
                    </div>
                </div>
            </div>
            <!--            </q-scroll-area>-->
        </q-drawer>

Video: https://youtu.be/RzxrMJQ_dyc

Screenshot:

Image from iOS Image from iOS (1) Image_from_iOS__2_

Issue Analytics

State:
Created 3 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

1reaction

joshtorrescommented, Oct 19, 2020

Ignore this, I just figured it out. It was because of this styling that I found in one of our stylesheets. Sorry to waste everyone’s time! Thanks for trying to help!

html {
    height  : 100%;
    overflow: hidden;
    position: relative;
}
body {
    height  : 100%;
    overflow: auto;
    position: relative;
}

0reactions

IlCallocommented, Oct 19, 2020

Happy you found the solution!

Top Results From Across the Web

mat-drawer-content with padding doesn't allow the scroll to go ...

I found a solution. I've removed the padding:32px 64px from mat-drawer-content and applied it in a new div, where router-outlet is included.

How To Create a Full screen Overlay Navigation - W3Schools

Use any element to open/show the overlay navigation menu --> <span onclick="openNav()">open</span> ... overflow-x: hidden; /* Disable horizontal scroll */

App-bar component - Vuetify

When using the inverted-scroll property, the bar will hide until the user scrolls past the designated threshold. Once past the threshold, the v- ......

Layout Drawer | Quasar Framework

The mini-to-overlay Boolean property will always set your drawer with fixed position, regardless of your configuration from the view prop, but will occupy...

overscroll-behavior - CSS: Cascading Style Sheets | MDN

If you have overscroll-behavior: contain; selected, the outer container will not scroll unless you move your cursor out of the inner container ...