Content is not scrolled within QLayout

  • Hi,
    no idea why but my content is not scrolling in the layout.
    This is my top level code of QLayout:

    <q-layout ref="layout" view="hHr LpR lFf" :pageClass="{'bg-grey-1':true, 'page-padding':true}" :leftClass="{'bg-primary': true, 'ep-left-navigation': true}">
    <q-toolbar slot="header" class="text-primary" color="primary" inverted>
    <div slot="left"> ... </div>

    So nothing strange. I was trying to exlude my own .styl file, but it does not change anything (I thought I maybe screwed Quasar CSS somehow with some own class).

    Content is just overgrowing container and I can’t scroll so content is going on the header and touching top edge of viewport and bottom part is just nto visible.

  • Admin

    You must have some left-over classes applied from v0.13 app. Otherwise I see no reason why this would happen. Any repo I can take a look pls?

  • @rstoenescu - this is my code so you can see all classes easily.
    I moved whole project to the new folder with newly generated 0.14 as it was suggested.

    The QLayout is direct child of q-app as it is on demo.

    Do you have BitBucket account? I could give you read access.

  • Admin

    Bitbucket account: “rstoenescu”

  • Will commit and send you invitation in the evening.

  • Admin

    Got it figured out. On your q-app div you are wrongly setting “fullscreen” CSS class along with some others that need removed.

  • Can’t scroll on desktop.
    I have not set heights or overflows neither via css nor programatically.

    Why does div#q-app height is less than the height of child divs?
    quasar.dom.height for div#q-app reports a small size, but devTools reports a larger (real) size.
    getScrollTarget for div#q-app returns window.

    Using quasar 0.14.4, and the project was started with 0.14.x already. No scrolling components used. No transitions used. No fullscreen classes or APIs used.
    I used cli generator to generate layout and pages.

    I’m using qLayout with <router-view />


    In the side drawer I put a logout btn but skipped calling $refs.layout.toggleLeft(), so since this is an SPA, body tag remained with class .with-layout-side-opened, which sets overflow: hidden

    Maybe this will someday save several hours to someone, as well as some hair pulled out 😉

Log in to reply