Page layout with vertical scrollbar left to the right drawer

[ansyk]

First of all congratulations for this useful and "nice" framework. I am rather new to Python and was glad to find something that nearly manages all of the browser frontend.

After some playing around I wanted that my application with the standard page layout has a body with a scrollbar left of the right drawer. However, this was difficult since, the body does not have a defined size. After a rather long research I arrived at the following solution, which I wanted to share.

with ui.header(elevated=True).style('background-color: #3874c8').classes('items-center justify-between'):
    ui.label('HEADER')
    ui.button(on_click=lambda: right_drawer.toggle(), icon='menu').props('flat color=white')
with ui.left_drawer(top_corner=True, bottom_corner=True).style('background-color: #d7e3f4'):
    ui.label('LEFT DRAWER')
with ui.right_drawer(fixed=False).style('background-color: #ebf1fa').props('bordered') as right_drawer:
    ui.label('RIGHT DRAWER')
with ui.footer().style('background-color: #3874c8'):
    ui.label('FOOTER')

ui.query('.nicegui-content').classes('p-0')
ui.query('.q-header').props('id=header')
ui.query('.q-footer').props('id=footer')    
scroll_area = ui.scroll_area().classes('p-0 gap-0')
with scroll_area:
    ui.label('CONTENT')
    [ui.label(f'Line {i}') for i in range(100)]

def on_page_resize(e):
    #print(f'resize: {e.args}')
    h = e.args['window_height']-e.args['header_height']- e.args['footer_height']
    scroll_area.style(f'height:{h}px')

ui.add_head_html("""
    <script>
    function emitPageResize() {
        const header = document.getElementById("header");
        const footer = document.getElementById("footer");
        emitEvent('page_resize', {
            window_height: window.innerHeight,
            header_height: header.offsetHeight,
            footer_height: footer.offsetHeight,
        });
    }
    window.addEventListener("load", emitPageResize); 
    window.addEventListener("resize", emitPageResize); 
    </script>
""")

ui.on('page_resize', on_page_resize)
ui.run()

The main obstacles were how to access the automatically created header and footer and to dynamically set the height of the scroll area, whenever the size of the browser window changes. The first problem was solved by setting the id of the footer and the header with the props property and accessing them then in Javascript with getElementyById. For the second problem I used "emitEvent" of the nicegui framework. It would be interesting, whether there is a solution without JavaScript.

As a side remark, which took me hours before I realized that the problem was not in my code, there seems to be an error in nicegui
Uncaught TypeError: ResizeObserver.observe: Argument 1 is not an object.
onload http://localhost:8080/:61
EventHandlerNonNull* http://localhost:8080/:57
localhost:8080:61:28
onload http://localhost:8080/:61
(Async: EventHandlerNonNull)
http://localhost:8080/:57

which is caused by following code snippet

.js-plotly-plot {box-sizing: content-box; }</style>

                <script>
                    window.onload = () => {
                        const header = getHtmlElement(4);
                        new ResizeObserver(() => {
                            document.documentElement.style.scrollPaddingTop = `${header.offsetHeight}px`;
                        }).observe(header);
                    };
                </script>

I think that this is inserted by nicegui into the html header.

[falkoschindler]

Interesting solution, @ansyk!

Assuming you know (or control) the height of the header and footer, the following proof of concept might be worth considering:

ui.context.client.content.classes('p-0')
with ui.scroll_area().classes('w-full h-[calc(100vh-6rem)]'):
    ui.label('CONTENT')
    [ui.label(f'Line {i}') for i in range(100)]
with ui.header().classes('h-12'):
    ui.label('HEADER')
with ui.left_drawer(top_corner=True, bottom_corner=True, bordered=True):
    ui.label('LEFT DRAWER')
with ui.right_drawer(bordered=True):
    ui.label('RIGHT DRAWER')
with ui.footer().classes('h-12'):
    ui.label('FOOTER')

Note that "h-12" equals to "height: 3rem", so we can subtract 6rem from the full height of the viewport (100vh) to get the height of the scroll area.

[ansyk]

Thank you! This is much simpler!

[evnchn]

@ansyk Unified response for both this and #4661:

Obviously solution with CSS calc is the cleanest and avoids all flash rendering issues.

But then, regarding your solution, you appear to be using emitEvent to ask for the server's opinion for what to set the height of the scroll area.

This would be awful if the client is connected over the internet, particularly with high delays.

You may consider the use of getHtmlElement and pass in the element ID (scroll_area.id) to find the element in JS and directly enact changes from there, without involving the server.