Label widget placement
Hello everyone, is there a way to have the widget label above the widget instead of on the left? When putting
in a custom css, it doesn't work. Thanks
9 Replies
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 expectingthanks 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
you can do
mo.ui.text().left()
or `mo.ui.text().center()
or .right()
on all of the ui elementsI'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')
“text” was just an example input. For slider, just do “slider().center()”
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?
Sounds like you need more serious customization, you can always just do plain HTML (inside) markdown if you need
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) :
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 ?