Direction for ui.inline

[derrick56007]

Hello, I've been using ui.inline to display components horizontally and also found the need to display components vertically. I understand that components can be shown vertically in ui.form_card but it would require me to specify the 'box' argument. It would be useful to have both vertical and horizontal options for inline so that variable-size row/column inline layouts could be constructed, similar to CSS flexboxes.

Suggestions valid values for the new argument direction = [row, row-reverse, column, column-reverse] taken from https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

Comments/Feedback appreciated. Thanks!

[lo5]

For better control over layout, I would recommend switching to the flex layout system: https://wave.h2o.ai/docs/layout#flex-layout

You'll then be able to compose layouts like this: https://github.com/h2oai/wave#responsive-layouts
Examples: https://github.com/h2oai/wave/tree/master/py/demo

[derrick56007]

@lo5 Thanks for the detailed reply! Is the flex layout system available for dialog cards?

[lo5]

Unfortunately, no. Dialogs created through ui.dialog() are intended to be fixed-height, with low-information-density, so it did not make much sense for us to complicate its API by supporting layouts.

In any case, there isn't much of a implementation/coding distinction between a base page and a dialog in Wave (as compared to doing this in, say, Javascript), so if there's a need for a complex layout on an intermediate (blocking) dialog-like UI, I'd just swap out the contents of the base page instead of employing a dialog, then swap back the base page right after.

[derrick56007]

if there's a need for a complex layout on an intermediate (blocking) dialog-like UI, I'd just swap out the contents of the base page instead of employing a dialog, then swap back the base page right after.

Makes sense, will go ahead and do this. Thanks!