Wish to have Select components within Row arranged side-by-side.
Hello,
Currently I have a side bar to store my controls. In my main window, I have a map.
Rather than having the controls in the sidebar, I would like to have the components in my control section side by side across the top. But row stills stacks components on top of each other:
import solara
import solara.lab
import datetime
end_date = datetime.date.today()
@solara.component
def Page():
# Default date range
date_range = solara.use_reactive((end_date - datetime.timedelta(days=-7), end_date))
with solara.AppBar(): with solara.AppBarTitle(): with solara.Row(style={"background-color": "transparent", "align-items": "center"}): solara.HTML(tag="img", attributes={"src": "https://picsum.photos/400/200", "style": "height: 40px"}) solara.Text("Cool Viewer") solara.v.Spacer() solara.Button(label="Quit", on_click = lambda: None)
with solara.Row(): Control(date_range)
with solara.Column(align = 'center'): View() @solara.component def Control(date_range): solara.Select('control 1', value = 'where', values = ['here', 'there', 'everywhere']) # Component to change to desired data range solara.lab.InputDateRange(date_range, sort=True) solara.Select('control 3', value = 'type', values = ['fast', 'slow', 'broken'])
@solara.component def View(): solara.Text(f'Map takes up whole area')
with solara.AppBar(): with solara.AppBarTitle(): with solara.Row(style={"background-color": "transparent", "align-items": "center"}): solara.HTML(tag="img", attributes={"src": "https://picsum.photos/400/200", "style": "height: 40px"}) solara.Text("Cool Viewer") solara.v.Spacer() solara.Button(label="Quit", on_click = lambda: None)
with solara.Row(): Control(date_range)
with solara.Column(align = 'center'): View() @solara.component def Control(date_range): solara.Select('control 1', value = 'where', values = ['here', 'there', 'everywhere']) # Component to change to desired data range solara.lab.InputDateRange(date_range, sort=True) solara.Select('control 3', value = 'type', values = ['fast', 'slow', 'broken'])
@solara.component def View(): solara.Text(f'Map takes up whole area')
1 Reply
Ah, discovered the Columns component. Looks like that might do it.
GridFixed worked too.