Hi,

if I create a simple layout with a non-fixed footer the footer is pushed down and scrolling is required, even though the content is smaller than the viewport.

To reproduce from a standard quasar init:

The Layout is defined with: <q-layout view="lHh Lpr lff"> and <q-layout-footer>Test</q-layout-footer> is added in the layout and QLayoutFooter imported in quasar.conf.js.

The page looks as follows:

<template>
  <q-page>
    <h1>test</h1>
  </q-page>
</template>

If I remove the margins from the h1: <h1 class="q-ma-none">test</h1> the page looks as expected.

What am I doing wrong?

thanks!

yes I did and from my understanding h1 is permissible (and should be to propperly structure web pages). I think I just did not understand that margins can only be used inside a layout when inside a “first” flex container created by “row” or “flex”?

so the rule about css margin mentioned in the layout documentation also applies to <q-page>? Maybe this could be added to the page documentation? Would have saved my some tinkering time

thanks for the help!

thanks, I want the lff behaviour. I expect it to behave like in https://quasar-framework.org/components/layout.html with lff and Extra content for scrolling disabled. but with the example I gave, it behaves as if there was extra content below the h1 which would trigger scrolling (but obviously there isn’t).

Hi,

if I create a simple layout with a non-fixed footer the footer is pushed down and scrolling is required, even though the content is smaller than the viewport.

To reproduce from a standard quasar init:

The Layout is defined with: <q-layout view="lHh Lpr lff"> and <q-layout-footer>Test</q-layout-footer> is added in the layout and QLayoutFooter imported in quasar.conf.js.

The page looks as follows:

<template>
  <q-page>
    <h1>test</h1>
  </q-page>
</template>

If I remove the margins from the h1: <h1 class="q-ma-none">test</h1> the page looks as expected.

What am I doing wrong?

thanks!