How to place AutocompleteInput selections above existing widgets

Panel
1 
import panel as pn

pn.config.sizing_mode = 'stretch_width'
pn.extension()

template = pn.template.MaterialTemplate()
template.sidebar.extend([pn.widgets.AutocompleteInput(options=["test"] * 1000), pn.widgets.Select(options=["a", "b", "c"]), pn.widgets.Select(name="under")])

template.servable()

image

2

Work Around

You can work around the problem if you wrap the widgets in a pn.Column or similar.

image
image3840×2060 262 KB 

import panel as pn

pn.config.sizing_mode = "stretch_width"
pn.extension()

pn.template.MaterialTemplate(sidebar=[pn.Column(
    pn.widgets.AutocompleteInput(options=["test"] * 1000),
    pn.widgets.Select(options=["a", "b", "c"]),
    pn.widgets.Select(name="under"),
)
]
).servable()
1 Like
3

Good to know!