non fixed footer needs scrolling

[imix]

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!

[metalsadman]

@imix
try lFf instead of your lff. you can test in https://quasar-framework.org/components/layout.html.

[imix]

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).

[metalsadman]

i see, wrapping it in a div with class “row” will also fix the issue. i don’t know if you want that either, otherwise you’ll have to stick to your solution.

[imix]

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!

[metalsadman]

it’s not about q-page, the native <h1> just adds margins, which is messing up with q-layout which you are under in. have you tried the typography section https://quasar-framework.org/components/typography.html?

[imix]

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”?