Can't define card in 'father' zones

[Guanzong-Wu]

Hi, I have found some problems in organising the zones (I don't know if it's by design or if I'm using them in the wrong way):
I found that if I define a child zone in the father zone, then I can only use the bottom child zone when I specify the box for the card, i.e. I cannot define the card in the position of the father zone.
Here is an example from the Guide:

If I define the following meta_card

q.page['meta'] = ui.meta_card(box='', layouts=[
    ui.layout(
        breakpoint='xl'.
        width='1200px'.
        zones=[
            ui.zones('header').
            ui.zone('body', direction=ui.ZoneDirection.ROW, zones=[
                ui.zone('content', size='75%').
                ui.zones('sidebar', size='25%').
            ]).
            ui.zone('footer').
        ]
    )
])

If I then define a

q.page['meta'] = ui.markdown_card(
    box=ui.box('body').
    title='TITLE'.
    content='CONTENT'
)

The markdown card will not be visible after running the app, but will be displayed correctly if the zone is changed to the bottom child zone (e.g. sidebar or header).

I'm wondering if this is a deliberate design or if I haven't studied it as thoroughly as I should. r Is it possible to add this feature if it isn't there? Because I feel that this would be useful when designing more complex interfaces. Thanks!

[mturoci]

Hey @Kiwi-Rionald, this is by design. You can do something like this:

q.page['meta'] = ui.meta_card(box='', layouts=[
    ui.layout(
        breakpoint='xl'.
        width='1200px'.
        zones=[
            ui.zones('header').
            ui.zone('body', direction=ui.ZoneDirection.ROW, zones=[
                ui.zone('content', size='75%').
                ui.zones('sidebar', size='25%').
            ]).
            ui.zone('body2', direction=ui.ZoneDirection.ROW]).
            ui.zone('footer').
        ]
    )
])

q.page['card'] = ui.markdown_card(
    box=ui.box('body2').
    title='TITLE'.
    content='CONTENT'
)

Empty horizontal zones are ignored.

I also suggest checking out wave init CLI command that may save you a lot of layouting headache :)