Navbar height is not aligning with page bottom

[ShehanIshanka]

In the following code, I have set nav bar height as 95%. The problem is nav bar height is changing when the card count is increased. Setting a fixed as calc(100vh-50px) won't resolve this as it will also cause to add a space between nav bar bottom and the page bottom.

from h2o_wave import app, main, Q, ui
PAGE_1_CARDS = 25
PAGE_2_CARDS = 32

@app("/")
async def serve(q: Q) -> None:
    init(q)

    if not q.args["#"]:
        q.page["meta"].redirect = "#page_1"
    else:
        q.client.active_page = q.args["#"]
        for i in range(max(PAGE_1_CARDS, PAGE_2_CARDS)):
            del q.page[f"project_{i}"]
        await q.page.save()

        if q.client.active_page == "page_1":
            for i in range(PAGE_1_CARDS):
                q.page[f"project_{i}"] = ui.form_card(
                    box=ui.box("content", width="480px"),
                    items=[
                        ui.inline(
                            items=[
                                ui.text_xl(content=f"Project-{i}"),
                            ]
                        )
                    ],
                )
        elif q.client.active_page == "page_2":
            for i in range(PAGE_2_CARDS):
                q.page[f"project_{i}"] = ui.form_card(
                    box=ui.box("content", width="480px"),
                    items=[
                        ui.inline(
                            items=[
                                ui.text_xl(content=f"Project-{i}"),
                            ]
                        )
                    ],
                )

    await q.page.save()


def init(q: Q):
    q.page["meta"] = ui.meta_card(
        "",
        title="Test App",
        layouts=[
            ui.layout(
                breakpoint="xs",
                zones=[
                    ui.zone("header"),
                    ui.zone(
                        name="body",
                        direction=ui.ZoneDirection.ROW,
                        zones=[
                            ui.zone(name="left_nav", size="289px"),
                            ui.zone(
                                name="right",
                                zones=[
                                    ui.zone("toolbar", direction=ui.ZoneDirection.ROW),
                                    ui.zone("title", direction=ui.ZoneDirection.ROW),
                                    ui.zone(
                                        "content",
                                        direction=ui.ZoneDirection.ROW,
                                        wrap=ui.ZoneWrap.STRETCH,
                                    ),
                                ],
                            ),
                        ],
                    ),
                ],
            )
        ],
    )
    q.page["header"] = ui.header_card(
        box="header",
        title="Test App",
        subtitle="",
    )

    q.page["navbar"] = ui.nav_card(
        box=ui.box("left_nav", height="95%", width="256px"),
        value=q.client.active_page,
        items=[
            ui.nav_group(
                "",
                items=[
                    ui.nav_item(
                        name="#page_1", label="Page 1", icon="OpenFolderHorizontal"
                    ),
                    ui.nav_item(name="#page_2", label="Page 2", icon="TVMonitor"),
                ],
            ),
        ],
        secondary_items=[ui.text("Footer")],
    )

Percentage height:

Screen.Recording.2022-11-23.at.15.55.28.mov

Fixed height ( calc(100vh-50px) ):

Concerns:

1. I suppose If we can set something like max(95%, calc(100vh)) for navbar height then that would solve this issue. Refer: https://stackoverflow.com/a/61085200/3304903
2. If we can include all the cards into a single card which will fil to screen size and also if all the cards cannot fit into the screen, then scrolling will be available inside the outer card rather than scrolling through the pages, this issue will be solved. I saw there is a card named flex_card, but it is in the experimental stage. I suppose it is intended for this type of case.

cc: @dulajra @shihan007 @Nayananga

[shihan007]

If we can add position fixed property to side nav and topnav we can solve this issue.

[mturoci]

I suppose If we can set something like max(95%, calc(100vh)) for navbar height then that would solve this issue

This should be already supported by Wave (you can use any valid CSS for width/height), but I don't see how this would solve your issue.

Note that we already have predefined app templates that you can use and maybe achieve what you want for free, e.g. this one

What are you trying to achieve? Making the top and side nav fixed and scroll only the content?

[ShehanIshanka]

Sorry for the late reply.

This should be already supported by Wave (you can use any valid CSS for width/height), but I don't see how this would solve your issue.

I tried it by setting nav_card box height as max(95%, calc(100vh)). But it does not work. This would solve the issue by keeping a long height even if there are less number of cards.

Screen.Recording.2022-11-30.at.09.19.57.mov

Note that we already have predefined app templates that you can use and maybe achieve what you want for free, e.g. this one

Could you please point me to an example?

What are you trying to achieve? Making the top and side nav fixed and scroll only the content?

yeah exactly.

[mturoci]

This would solve the issue by keeping a long height even if there are less number of cards.

I don't think so. Does it work if you set it within browser devtools?

Could you please point me to an example?

pip install h2o-wave
wave init
(pick `App with header & sidebar + navigation`)
wave run app

Or if you have Wave IDE extension installed - w_app_header_sidebar_nav.

yeah exactly.

This may require a few additional tweaks, will get back to you once I have time for it.