The Datepicker inside sidebar should be above the main area

Panel
, ,
1

I would like to put the Datepicker widget inside the sidebar in FastListTemplate. However I dislike the size of the sidebar and decide to reduce it to 200px. But then I found out that doing so will make the Datepicker input area got covered by the main area as it is longer than the sidebar, moreover when the widget is clicked, some part of the calendar also got covered by the calendar.

panel_sidebar_covered

I think it would be nice if the Datepicker input area size can be updated (whether manually or automatically) to fit inside the sidebar. Also it would be great if the calendar is positioned above the main area so that it will not be covered even when the sidebar is smaller than the calendar.

Some snippets of the code that I am using here:

start_date = pn.widgets.DatePicker(name='Start Date')
end_date = pn.widgets.DatePicker(name='End Date')

template = pn.template.FastListTemplate(
    title="A Simple Layout Dashboard",
    sidebar=[start_date, end_date],
    sidebar_width=200,
)
2

Agree this is very frustrating

3

You may be able to update the z-index in stylesheets

Also, feel free to submit an issue to the Panel repo.

4

I have created the issue here:

Datepicker in sidebar does not overlay main area · Issue #5800 · holoviz/panel (github.com)

The z-index is already set high for the calender:
image

So I am not entirely sure what workaround there is currently.

5

My guess would be that it’s a different CSS element.