Getting the width and height of a page?

[PoshoDev]

Question

Hello there, 🙂

I am trying to get the width and height of the whole page for something I'm working on. This seemed like a fairly simple thing to do, but I'm ashamed to say it has been quite a hard ordeal for me.

I've already tried the following:

• Researched the code for ui.header and ui.left_drawer (since it automatically hides when the page size becomes portrait, but it seems like the Quasar's "show-if-above" prop handles that logic).
• Looked into the ui.aggrid's ag-grid-community.min.js code (since it also handles resizing, but that's too much for me to make any sense of).
• Investigating if such variables are hidden somewhere in the Context, Page, Core, App classes.
• Playing around with Tailwind and CSS (with no avail, due to inexperience).

The closest I've come is by rewriting @falkoschindler's solution from #1731 like this:

with ui.page_sticky():#.props("hidden"):
    btn = ui.button().props("size=1px; dense").on("resize", lambda e: print(e.args))
    ui.add_head_html(f'''
    <script>
    function emitResizeEvent() {{
        content = document.querySelector('.nicegui-content');
        const dimensions = {{
            w: content.offsetParent.offsetWidth,
            h: content.offsetParent.offsetHeight
        }};
        getElement({btn.id}).$emit('resize', dimensions);
    }}
    window.onload = emitResizeEvent;
    window.onresize = emitResizeEvent;
    </script>
    ''')

In this code, I:

• Create an ui.page_sticky with an ui.button inside of it and put it in the bottom-right corner of the page.
• Create a modified version of the original <script> where I define a custom .on("resize") event and send the content.offsetParent's offsetWidth and offsetHeight through a dict when the event happens.

This kind of works, but has caveats:

• The user needs to resize the page in order to retrieve the values. Ideally, I would need to know the values when the page loads.
• The values are inaccurate since the ui.button has some leftover size.

At this point I don't know what else to do but to ask for help. I'm going to cry when someone inevitably points out there was some sort of page.get_width() function all along and I've been dabbling with this for hours. 😭

[falkoschindler]

Hi @PoshoDev,

In version 1.4.7 we introduced a simpler way to emit global events:

ui.add_head_html('''
    <script>
    function emitSize() {
        emitEvent('resize', {
            width: document.body.offsetWidth,
            height: document.body.offsetHeight,
        });
    }
    window.onload = emitSize;
    window.onresize = emitSize;
    </script>
''')

ui.on('resize', lambda e: print(f'resize: {e.args}'))

In my tests this emits the size when the page loads as well as when it is resized. Does this fulfil your needs?

[PoshoDev]

Thank you so very much! 😃

This is exactly what I needed and is a billion times cleaner. You are a life saver!