Label widget placement

At a glance

The community members are discussing how to position the label above the widget instead of on the left. The initial suggestion of using flex-direction: column; in custom CSS did not work. Community members then suggested using full_width=True to flip the direction of the label, but this had some side effects on the widget width. They also explored using mo.ui.text().center() to center the label, but encountered issues with the syntax. Ultimately, the community members concluded that more serious customization is needed, and one member suggested using plain HTML inside Markdown as a solution. Another member proposed creating a mo.md() for each widget to control the layout and spacing, but there was no clear consensus on the best approach.

hhystakop

Hello everyone, is there a way to have the widget label above the widget instead of on the left? When putting

Plain Text

.flex-row {
    flex-direction: column;
}

in a custom css, it doesn't work. Thanks

10 comments

MMyles Scolnick

for most of the form elements, you can do full_width=True which flips direction of the label, but let me know if this has side-effects you werent expecting

hhystakop

thanks for your quick reply. Indeed full_width=True put the label above but it seems to modify the width of some widgets (tested on slider and number). If inside a vstack, the widget is expanded over the entire cell. If inside a hstack, the widget takes the label width. Also I would like to center the label on the widget if possible

MMyles Scolnick

you can do mo.ui.text().left() or `mo.ui.text().center() or .right() on all of the ui elements

hhystakop

I'm not sure to understand, if I do mo.ui.slider(0,10,1,label="Slider",full_width=True).text().center(), it gives the following error TypeError
This cell raised an exception: TypeError(''str' object is not callable')

MMyles Scolnick

“text” was just an example input. For slider, just do “slider().center()”

hhystakop

ok, If I do mo.ui.number(start=0, step=0.25, stop=2, value=0.5, label="gap",full_width=True).center(), the label is above but not centred with respect to the widget. Also for some widgets (checkbox), there is no full_width arg. Isn't there a way to have the labels above and centred in relation to the widgets for all the widgets of the app?

MMyles Scolnick

Sounds like you need more serious customization, you can always just do plain HTML (inside) markdown if you need

Attachment

MMyles Scolnick

Plain Text

checkbox = mo.ui.checkbox()

mo.md(f"""
<div style="text-align:center">
    Checkbox<br/>{checkbox}
</div>
""").center()

hhystakop

that's a solution. Alternatively, I thought about creating a mo.md() for each widget to replace the label and play with the justify / align in the mo.vstack / hstack. Do you have a simple solution to create an empty space ? My idea would be to clearly separate the different blocks (mo.md() + its associated widget) :

Plain Text

mo.vstack([slider_name, slider_widget, space, checkbox_name, checkbox_widget],align = "center")

hhystakop

using the mo.html : mo.Html("""<div style='width: 100%; height: 10px; background-color: rgba(255, 165, 0, 0);'></div>"""), do you have a better solution ?

Add a reply

Get help from the marimo community

Label widget placement