Make a specific zone scrollable

[angus-clark]

Is it possible to make a specific vertical zone scrollable? I have a sidebar nav layout and I would like the main content to the right of it to be scrollable whilst the sidebar nav remains fixed in place.

[mturoci]

Yes, bit needs a bit of CSS trickery atm.

from h2o_wave import main, app, Q, ui, on, run_on, data
from typing import Optional, List


def add_card(q, name, card) -> None:
    q.client.cards.add(name)
    q.page[name] = card


@on('#page1')
async def page1(q: Q):
    for i in range(3):
        add_card(q, f'info{i}', ui.tall_info_card(box='vertical', name='', title='Speed',
                                                  caption='The models are performant thanks to...', icon='SpeedHigh'))
    add_card(q, 'article', ui.tall_article_preview_card(
        box=ui.box('vertical', height='600px'), title='How does magic work',
        image='https://images.pexels.com/photos/624015/pexels-photo-624015.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
        content='Foo bar'
    ))

async def init(q: Q) -> None:
    inline_style = '''
    div[data-test='content'] {
      overflow-y: auto;
    }
    '''
    q.page['meta'] = ui.meta_card(
        box='', 
        layouts=[ui.layout(breakpoint='xs', min_height='100vh', zones=[
            ui.zone('main', size='1', direction=ui.ZoneDirection.ROW, zones=[
                ui.zone('sidebar', size='250px'),
                ui.zone('body', zones=[
                    # Set your main content zone to 100vh to make it take up the full height of the screen.
                    ui.zone('content', size='100vh', zones=[ 
                        ui.zone('vertical'),
                    ]),
                ]),
            ])
        ])],
        # Sprinkle in a bit of custom CSS to make the content zone scroll instead of grow.
        stylesheet=ui.inline_stylesheet(inline_style)
    )

    q.page['sidebar'] = ui.nav_card(
        box='sidebar', color='primary', title='My App', subtitle="Let's conquer the world!",
        value=f'#{q.args["#"]}' if q.args['#'] else '#page1',
        image='https://wave.h2o.ai/img/h2o-logo.svg', items=[
            ui.nav_group('Menu', items=[
                ui.nav_item(name='#page1', label='Home'),
            ]),
        ],
    )
    await page1(q)


@app('/')
async def serve(q: Q):
    # Run only once per client connection.
    if not q.client.initialized:
        q.client.cards = set()
        await init(q)
        q.client.initialized = True

    # Handle routing.
    await run_on(q)
    await q.page.save()

Screen.Recording.2024-08-05.at.3.45.38.PM.mov

cc @mtanco as I think you might find this useful as well.

[angus-clark]

Thanks Martin works perfectly 👍🏻