justify elements with vstack

At a glance

The community members are discussing how to align two elements in a composite component to justify both the left and right sides. One community member suggests using a grid-layout approach by creating a horizontal stack with two vertical stacks, one for the labels and one for the inputs. Another community member feels this doesn't fully address the issue of varying label widths. A third community member shares a potential solution using HTML templates to position and style the elements, which the original poster finds to be a good hybrid approach that provides flexibility.

Useful resources

jjohn_helt

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:

Attachment

5 comments

HHaleshot

You mean like this:

Attachment

MMyles Scolnick

@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:

Plain Text

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

jjohn_helt

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

AAkshay

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

Attachment

jjohn_helt

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.

Add a reply

Get help from the marimo community

justify elements with vstack