Page Layout: incorrect layouting behavior?

[hroemer]

Experimenting with the example shown in #187 I fear the generated layout is not correct when defining top_corner or bottom_corner as False:

from fastapi import FastAPI
from nicegui import ui

def create_layout(app: FastAPI, path: str = 'clean', title: str = 'clean'):
    @ui.page(path=path, dark=True, title=title)
    async def page_layout():
        ui.label('CONTENT')
        with ui.header():
            ui.label('HEADER')
        with ui.left_drawer(top_corner=True, bottom_corner=True):
            ui.label('LEFT DRAWER')
        with ui.right_drawer(top_corner=False, bottom_corner=False):
            ui.label('RIGHT DRAWER')
        with ui.footer():
            ui.label('FOOTER')

    ui.run_with(app=app)


app = FastAPI()
layout = create_layout(app=app, path='/layout', title='layout')

The resulting HTML is:

<div class="q-layout q-layout--standard" tabindex="-1" id="0" style="min-height: 711.333px;">
    <!----><!---->
    <div class="q-page-container" id="1" style="padding-top: 53px; padding-bottom: 53px;">
        <div id="2" class="q-pa-md column items-start gap-4">
            <div id="3">CONTENT</div>
            <header class="q-header q-layout__section--marginal fixed-top q-pa-md row items-start gap-4" id="4">
                <div id="5">HEADER</div>
                <!---->
            </header>
            <div class="q-drawer-container">
                <div class="q-drawer__opener fixed-left" aria-hidden="true"></div>
                <div class="fullscreen q-drawer__backdrop hidden" aria-hidden="true" style="background-color: rgba(0, 0, 0, 0);"></div>
                <aside class="q-drawer q-drawer--left q-drawer--dark q-dark q-layout--prevent-focus fixed q-drawer--on-top q-drawer--mobile q-drawer--top-padding" style="width: 300px; transform: translateX(-300px);">
                    <div id="6" class="q-drawer__content fit scroll q-pa-md"><div id="7">LEFT DRAWER</div></div>
                </aside>
            </div>
            <div class="q-drawer-container">
                <div class="q-drawer__opener fixed-right" aria-hidden="true"></div>
                <div class="fullscreen q-drawer__backdrop hidden" aria-hidden="true" style="background-color: rgba(0, 0, 0, 0);"></div>
                <aside class="q-drawer q-drawer--right q-drawer--dark q-dark q-layout--prevent-focus fixed q-drawer--on-top q-drawer--mobile q-drawer--top-padding" style="width: 300px; transform: translateX(300px);">
                    <div id="8" class="q-drawer__content fit scroll q-pa-md"><div id="9">RIGHT DRAWER</div></div>
                </aside>
            </div>
            <footer class="q-footer q-layout__section--marginal fixed-bottom q-pa-md row items-start gap-4" id="10">
                <!---->
                <div id="11">FOOTER</div>
            </footer>
        </div>
    </div>
</div>

The right drawer is drawn from top to bottom overlapping header and footer.

The layouting actually does not adhere to the Quasar Layout component documentation.

Header, Footer, Drawer and PageContainer should be nested inside <q-layout> on the same level.

<div class="q-pa-md">
   <q-layout view="lhh LpR lff" container style="height: 500px" class="shadow-2 rounded-borders">
      <q-header>...</q-header>
      <q-footer>...</q-footer>
      <q-page-container>
          <q-page>ACTUAL CONTENT HERE</q-page>
      </q-page-container>
     </q-layout>
</div>

1. Is this deviation from the Quasar an intended approach?
2. Would nested-routes and thus SPA still be an option here by defining the "outer layout" and just load individual views/pages inside the <q-page-container> / <router-view>?

[falkoschindler]

Strange. On my machine (MacOS with Chrome, Firefox or Safari) the layout looks as expected. The right drawer ends at the header and footer, respectively.

Regarding question 1:
So you are suggesting to wrap the content in q-page-container and q-page, right? Honestly, I haven't thought about it, yet. I probably tried to place the content without unnecessary layout wrappers to reduce impact for use cases without any page layout in mind. But since we're using q-layout anyway, we can as well also use q-page-container and q-page. I'll try it out.

Regarding question 2:
Yes, we have SPAs in mind, but haven't yet worked on a concrete implementation. We definitely want to support it the not too distant future.

[falkoschindler]

Oh, now I see it: Currently header, footer and drawers are nested inside q-page-container, which instead should be a sibling. I'll check if we can change the structure towards the recommendation.

[hroemer]

Thanks for investigating. It also works on my end if the browser can use the the full width:

I am on Linux using a tiling window manager. I get the faulty behavior when not using full width:

It is also reproducible when scaling (e.g. 150% zoom factor in Chromium, 200% in Firefox). Thus I believe the CSS breakpoint (at 1024px) also has an impact.

Regarding question 1: if q-layout is already set, I would appreciate using quasar layouting recommendations. 👍

Regarding question 2: I haven't actually used nested-routes myself yet, but think this would help implementing seamless transitions between views.

[falkoschindler]

Very strange. I can't reproduce it. But maybe it helped to fix the layout hierarchy in commit 3eb10a9.
@hroemer Do you still get the wrong layout with version 1.1.0?

[falkoschindler]

Does the static demo work or is the layout broken? I guess your main problem is that the right drawer does not disappear like the left one. But on my machine both drawers disappear at the same time.

Maybe you can try further reducing the code until the problem is gone. Or maybe the problem persists even after removing everything NiceGUI-related. Then it might be a Quasar issue.

[hroemer]

The layout is broken in the static demo as well. The right drawer should be limited by the header and the footer. It works for large page widths > 1024px. For lower widths the right drawer overlaps the header and the footer.

I further reduced the code. It contains only quasar and vue now. I even updated the quasar lib to the latest version and tried reordering the elements, but still the problem persists.

• layout.html
• layout_order.html

Could you please confirm that this is an issue on the quasar side? Maybe I totally missed something here!?

[falkoschindler]

I'm not sure. There's still NiceGUI's renderRecursively which might do something wrong.
But maybe you can check from the other side: How does the layout builder page behave? Do the drawers disappear correctly? Maybe you can export a layout and insert it into a plain JavaScript Vue app.
I'd love to debug this issue myself, but without being able to reproduce the problem I'm pretty blind.

[hroemer]

Thanks for pointing me to the layout builder. It actually shows the same behavior as with NiceGUI: https://user-images.githubusercontent.com/16097755/213912535-e2c469be-1446-4a91-a68a-9416e8806c1b.mp4

Now I get the impression that this is the desired behavior, which actually makes sense.
hRf for the right drawer would reduce the available space for page to an unusable size if the drawer insisted on not sliding over the page content for breakpoints < 1024px.

My apologies for causing noise and counterproductive efforts here! 🙇

[falkoschindler]

Oh I see! I wasn't aware that your screenshot showed the state after pulling out the drawer. I only shrunk my browser window and the drawers were gone as expected.
Anyway, glad to hear that everything is working now. 🙂
And thanks for your effort! It could as well have been a subtle bug in NiceGUI only showing up in rare circumstances.