Label widget placement

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

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

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

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

9 Replies

Myles Scolnick•2mo ago

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

hystakopOP•2mo ago

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

Myles Scolnick•2mo ago

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

hystakopOP•2mo ago

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')

Myles Scolnick•2mo ago

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

hystakopOP•2mo ago

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?

Myles Scolnick•2mo ago

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

Myles Scolnick•2mo ago

checkbox = mo.ui.checkbox()

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

checkbox = mo.ui.checkbox()

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

hystakopOP•2mo ago

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

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

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

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 ?