Can't Center Footer

[mtanco]

I am unable to center my footer, I have tried a few different ways, below is copy pasted from an app that has a centered footer.

OS X, I have tried python 3.6 and 3.7, I have tried Wave 0.18.0 and 0.19.0...

from h2o_wave import Q, app, handle_on, main, on, ui  # noqa F401

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

    q.page["footer"] = ui.footer_card(
        box="1 1 -1 -1",
        caption='<p style="text-align: center;">Made with 💛️ using Wave. (c) 2021 H2O.ai. All rights reserved.</p>',
    )

    await q.page.save()

Any thoughts?

[mturoci]

What app does it work in?

Also, note that we are planning to ship an improved footer in the near future. @mtanco feel free to check proposed design and let us know if you have any further suggestions.

[mturoci]

@mtanco here is a working code, you will need to use flex layout:

from h2o_wave import Q, app, handle_on, main, on, ui  # noqa F401


@app("/")
async def serve(q: Q) -> None:
    q.page['meta'] = ui.meta_card(box='', layouts=[
        ui.layout(breakpoint='xs', zones=[
            ui.zone(
                name='_main_',
                zones=[ui.zone(name='footer', justify='center', direction=ui.ZoneDirection.ROW)],
            ),
        ]),
    ])
    q.page["footer"] = ui.footer_card(
        box=ui.box('footer', width='450px'),
        caption='<p style="text-align: center; width: 450px">I am centered</p>',
    )

    await q.page.save()

[sairaamv]

@mtanco , Interesting and I think its because of wave-s13 (link) class rather as wave-s12 or separate style for footer. Need to setup npm/go in my new mac to build and see. Will check 👍🏽

[sairaamv]

@mturoci , Just saw your proposed design. Thanks for sharing. just out of curiosity, if a content is not rendering as per the style provided could be because of wave-s13' style. Is my presumption right? -- thanks

[mturoci]

Hi @sairaamv, why do you think it is caused bywave-s13 class? It's just a typography class that sets font size, line height and letter spacing.

The reason why Michelle's code is not working as expected is that the footer's content-box doesn't expand the full card width.

[sairaamv]

My bad. Was comparing the render with text's content with footercard's caption and saw the difference in the class. Was wondering thats the difference.