Ui box is auto x auto. I can`t see any content.

[hjdxm]

Question

I can't see any content on the desktop, but it appears on mobile. I checked using F12 and found that the box size is auto x auto.
How can I fix it?

def get_hear(zero=None):
    with ui.row().classes("w-full bg-blue-300 px-[16px] py-[20px] text-[16px]")as row:
        # desktop
        with ui.row().classes("hidden md:flex  w-full justify-between"):
            with ui.row():
                if zero:
                    zero()
                ui.label("Hello world")
            with ui.row():
                ui.label("1")
                ui.label("2")
                ui.label("3")
                ui.label("4")
                ui.label("5")
        # mobile
        with ui.row().classes("flex md:hidden h-full w-full flex justify-between "):
            with ui.row():
                if zero:
                    zero()
                ui.label("Hello world")
            with ui.row():
                ui.label("button")
    return row

[falkoschindler]

Hi @hjdxm,

Can you, please, try to create a minimum reproducible code example? This would allow us and the community to help more efficiently. Thanks!
Why is it important to provide a minimal reproducible example?

[hjdxm]

Thank you. There it is.

# demo.py
from nicegui import ui
from mybins.uicomponent import get_hear

@ui.page("/")
def demo_page():
    ui.query(".nicegui-content").classes("m-0 p-0 gap-0")
    with ui.column().classes("w-full"):
        get_hear()

ui.run()

DESKTOP

MOBILE

[falkoschindler]

This is not reproducible. It is missing another module mybins.uicomponent. And even if we take get_hear from above, it is missing zero().
At the same time it doesn't look minimal. Do you really need ui.query, the page function, a column, the separation into multiple modules, eight different labels, so many classes etc.?
The point of a minimum reproducible example is to provide everything that is needed in one place so that it is easy for the community to reproduce your problem.

[hjdxm]

This Python file can run directly without depending on other files.

#demo.py
from nicegui import ui

def get_hear(zero=None):
    with ui.row().classes("w-full bg-blue-300 px-[16px] py-[20px] text-[16px]")as row:
        # desktop
        with ui.row().classes("hidden md:flex  w-full justify-between"):
            with ui.row():
                if zero:
                    zero()
                ui.label("Hello world")
            with ui.row():
                ui.label("1")
                ui.label("2")
                ui.label("3")
                ui.label("4")
                ui.label("5")
        # mobile
        with ui.row().classes("flex md:hidden h-full w-full flex justify-between "):
            with ui.row():
                if zero:
                    zero()
                ui.label("Hello world")
            with ui.row():
                ui.label("button")
    return row


@ui.page("/home")
def demo_page():
    ui.query(".nicegui-content").classes("m-0 p-0 gap-0")
    with ui.column().classes("w-full"):
        get_hear()


ui.run()

[falkoschindler]

Ok, I see. So this is a minimal example:

ui.label('Desktop').classes('hidden md:flex')
ui.label('Mobile').classes('flex md:hidden')

The problem is that "md:flex" doesn't reliably overwrite "hidden". Results for concurring Tailwind classes are hard to predict. It's better to use an upper limit with "max-md":

ui.label('Desktop').classes('max-md:hidden')
ui.label('Mobile').classes('md:hidden')

See #4111 (comment) for a similar question.

[hjdxm]

Thank you very much!!