Page layout with full body editor

[ansyk]

Following #4660 relating to moving the vertical scrollbar to the left of the right drawer, I wanted an ui.editor, which fills out the complete body of the standard page layout. Here, I ran into the problem that the header of the editor was scrolled out of sight, when I used a scrollarea. This is problematic, when the content of the editor window is rather long.

My solution is

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

editor = ui.editor().classes('p-0 gap-0 w-full').props('id=editor')
editor.props('min-height=100px max-height=100px')

s = ''
for i in range(100):
    s = s + f'Line {i} <br>'
editor.value = s

ui.query('.nicegui-content').classes('p-0')
ui.query('.q-header').props('id=header')
ui.query('.q-footer').props('id=footer')    

def on_page_resize(e):
    h = e.args['window_height']-e.args['header_height']- e.args['footer_height']- e.args['toolbar_height']-2
    editor.props(f'min-height={h}px max-height={h}px')

ui.add_head_html("""
    <script>
    function emitPageResize() {
        const header = document.getElementById("header");
        const footer = document.getElementById("footer");
        const tool = document.getElementById("editor").childNodes[0]; // this is the div containing the toolbar
        emitEvent('page_resize', {
            window_height: window.innerHeight,
            header_height: header.offsetHeight,
            footer_height: footer.offsetHeight,
            toolbar_height: tool.offsetHeight,
        });
    }
    window.addEventListener("load", emitPageResize); 
    window.addEventListener("resize", emitPageResize); 
    </script>
""")

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

Here it took me long to find out that there are the not documented props min-height and max-height of the quasar editor, which set the height of the content area of the editor. It would be interesting, whether there is a solution without JavaScript.

It is also interesting to note that the scrollbar of the editor is not the nice one of the quasar framework but the standard one of the browser. This seems to be a problem in the quasar framework.

[falkoschindler]

Similar to #4660 (comment) I thought we could calculate the height of the editor via CSS. But, unfortunately, the editor's "height" props don't seem to support calc. And if we ignore the toolbar and set the height to "100%", the content is overflowing the editor area and you can't reach line 99:

ui.context.client.content.classes('p-0')
ui.editor(value='<br>'.join(f'Line {i}' for i in range(100))) \
    .classes('w-full h-[calc(100vh-6rem)]').props('height="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')

Custom CSS to the rescue!

ui.add_css('.q-editor__content { height: calc(100% - 2rem); }')

You need to remove .props('height="100%"') though.

[evnchn]

Check #4660 (reply in thread)