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>
            ....
          </q-toolbar>
    <div slot="left"> ... </div>
    <router-view/>
    </q-layout>
    

    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 />



  • SOLVED:

    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
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.