john_helt•2w ago

justify elements with vstack

Is there a way to let two elements align in a way that jusfies both left and right hand side of the composite component? Currently, I get something like this. But I would like to extend the elements sides so they match:

8 Replies

Hall•2w ago

Someone will reply to you shortly. In the meantime, this might help:

john_heltOP•2w ago

Haleshot•2w ago

You mean like this:

Haleshot•2w ago

Myles Scolnick•2w ago

@john_helt , if you are looking for more of a grid-layout, you may need to roll this yourself instead of using the labels on the form:

mo.hstack(
  [
    mo.vstack([label1, label2]),
    mo.vstack([input1, input2])
  ],
  justify="start"
)

mo.hstack(
  [
    mo.vstack([label1, label2]),
    mo.vstack([input1, input2])
  ],
  justify="start"
)

john_heltOP•2w ago

I feel like that doesn't really give the grid layout, because the text field is always the same width, but the labels may vary

Akshay•2w ago

I think it works for your use case with varying labels? https://marimo.app/l/mzcg1b

marimo | a next-generation Python notebook

A reactive notebook for Python — run reproducible experiments, execute as a script, deploy as an app, and version with git.

john_heltOP•7d ago

You are right. It is working, when you split it into columns like that. While I was working into creating a better layout for my app, I came up with the idea to wrap my elements in html and use html templates to both position and style the elements. I feel it's a good hybrid and gives me a lot of flexibility.

justify elements with vstack

Did you find this page helpful?