How to properly vertically stretch items within a grid?

[valankar]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

def echarts_page():
    data = {
        "xAxis": {"type": "value"},
        "yAxis": {"type": "category", "data": ["A", "B"], "inverse": True},
        "legend": {"textStyle": {"color": "gray"}},
        "series": [
            {"type": "bar", "name": "Alpha", "data": [0.1, 0.2]},
            {"type": "bar", "name": "Beta", "data": [0.3, 0.4]},
        ],
    }
    with ui.grid(columns=2).classes("w-full h-screen gap-0"):
        for _ in range(6):
            ui.echart(data).classes("h-auto")

Description

I'm struggling to understand how to vertical stretch properly with ui.grid. In the example code, I'd like the echarts to use up all available space vertically in a grid, with each row using an even amount of space. What happens is every row gets successively smaller. I can set a height specifically such as h-[300px] and that seems to work, but is there a way to just have it stretch to fit?

NiceGUI Version

2.14.1

Python Version

Python 3.12.9

Browser

Edge

Operating System

Linux

Additional Context

No response

[evnchn]

I don't have a computer, but I'm pretty sure you have to w-full the ui.echart as well.

Get familiar with Tailwind CSS classes with regards to "flex" layout. They are what you want when you want, say, it to fill remaining space.

If in doubt, you can ask ChatGPT. It's pretty good at it.

Prompt wise, no need to explain NiceGUI to it. Just say it's a "Python wrapper for Tailwind CSS, Quasar components, and Apache EChart"

[valankar]

Sorry I mistakenly put 'horizontally' when I meant 'vertically'. The width is stretching fine, just not the height. I tried h-full on the ui.echart but that doesn't do it either.

[evnchn]

Ah!

Recall in the chat with llm example, the dialog box for the message log expands the entire height.

These two magical lines may be the reason:

https://github.com/zauberzeug/nicegui/blob/main/examples%2Fchat_with_ai%2Fmain.py#L35-L36

[falkoschindler]

Removing "h-auto" seems to work nicely:

[falkoschindler]

I see. If there is more vertical space, the charts don't grow:

with ui.grid(columns=2).classes('w-full h-[calc(100vh-2rem)]'):
    for _ in range(4):
        ui.echart({'xAxis': {}, 'yAxis': {}, 'series': []}).classes('border')

But with "h-full" the charts grow unequally:

with ui.grid(columns=2).classes('w-full h-[calc(100vh-2rem)]'):
    for _ in range(4):
        ui.echart({'xAxis': {}, 'yAxis': {}, 'series': []}).classes('border h-full')

[falkoschindler]

I'm not 100% sure why, but adding "grid-rows-2" to the grid helps:

with ui.grid(columns=2).classes('w-full h-[calc(100vh-2rem)] grid-rows-2'):
    for _ in range(4):
        ui.echart({'xAxis': {}, 'yAxis': {}, 'series': []}).classes('border h-full')

[evnchn]

Use the grid-rows-* utilities to create grids with n equally sized rows.

https://v3.tailwindcss.com/docs/grid-template-rows

[falkoschindler]

Oh, we can write ui.grid(columns=2, rows=2) to achieve equal rows and columns. 🙂

[evnchn]

Yes exactly

https://github.com/zauberzeug/nicegui/blob/main/nicegui%2Felements%2Fgrid.py

That's what was done under the hood, haha 😂

[valankar]

Oh, we can write ui.grid(columns=2, rows=2) to achieve equal rows and columns. 🙂

Ah. Ok so adding h-full to the echart, and adding rows= to grid does the trick. Without h-full on the echart, it does not seem enough. I would have never guessed that combination.

[evnchn]

Welcome to Web Dev, I guess 🤡