CODEWITHSUNDEEP
javascripthtmlvuejs2vue-componentquasar
ricopo
ricopo

Reputation: 475

Quasar - Vertical scrollbar not working on more than 600px width

I'm working with quasar framework and i don't know why the vertical scroll bar in a .vue component is failing depending on the width of the window. It works for less than 600px of width.

home.vue Code:

    <template>
    <div class="layout-padding">
        <div class="user">
            <p>User Component</p>
            <router-view class="layout-view"></router-view>
        </div>  
        <div>
            <i>account_circle</i>
            <p class="bg-red-1">Quasar framework</p>
            <button class="secondary" @click="toggleFullscreen()">
            <i class="on-left">zoom_out_map</i>
            Toggle Fullscreen  
            </button>
        </div>

        <div>
            <p>-</p>
            <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <small>Someone famous for <cite title="Quasar Framework">Quasar Framework</cite></small>
            </blockquote>
        </div>
    </div>
</template>

Upvotes: 3

Views: 2332

Answers (2)

Joan Galm&#233;s Riera
Joan Galm&#233;s Riera

Reputation: 593

If the PREVIOUS page had an opened modal, the current page has some parameters from modals (like no scroll page). So the solution is close the modal (@click="modal.close()") in the previous page and then go to the current page.

Upvotes: 0

ricopo
ricopo

Reputation: 475

A root node is required for subroutes so I have to add a div that contains the "layout-padding" div

<template>
    <div> <!-- root node -->
        <div class="layout-padding">
            [Content...]
        </div>
    </div>
</template>

I got the solution from quasar documentation: http://quasar-framework.org/components/layout-overview.html#Understanding-Layouts

Upvotes: 1

Related Questions