Plotly Dash Date Picker Range show underneath inputs

Question

I'm building a dashboard with Plotly Dash in Python and I added a Date Picker Range input on my layout. The problem comes when I open the Date Picker, the calendar shows some the underneath inputs (but not all).

I don't know how to solve this, I already tried adding style property with:

style = {'container': 'body'}

The code for all the inputs I have is the following one:

controls = dbc.FormGroup(
    [
        html.P('Select Dates', style={
            'textAlign': 'center'
        }),
        dcc.DatePickerRange(
            id='date-picker-range',
            min_date_allowed=min_date,
            max_date_allowed=max_date,
            initial_visible_month=datetime.datetime(datetime.datetime.today().year, 1, 1).date(),
            # end_date=max_date,
            show_outside_days=True,
            day_size=32,
            display_format='DD/MM/YYYY',
            clearable=True
        ),
        html.Br(),
        html.Br(),
        html.P('Time Serie by', style={
            'textAlign': 'center'
        }),
        dbc.Card([dbc.RadioItems(
            id='radio_items',
            options=[{
                'label': 'Month',
                'value': 'M'
            },
                {
                    'label': 'Week',
                    'value': 'W'
                },
                {
                    'label': 'Day',
                    'value': 'D'
                }
            ],
            value='M',
            style={
                'margin': 'auto'
            }
        )]),
        html.Br(),
        html.P('Dropdown', style={
            'textAlign': 'center'
        }),
        dcc.Dropdown(
            id='dropdown',
            options=[{
                'label': 'Value One',
                'value': 'value1'
            }, {
                'label': 'Value Two',
                'value': 'value2'
            },
                {
                    'label': 'Value Three',
                    'value': 'value3'
                }
            ],
            value=['value1'],  # default value
            multi=True
        ),
        html.Br(),
        html.P('Range Slider', style={
            'textAlign': 'center'
        }),
        dcc.RangeSlider(
            id='range_slider',
            min=0,
            max=20,
            step=0.5,
            value=[5, 15]
        ),
        html.Br(),
        dbc.Button(
            id='submit_button',
            n_clicks=0,
            children='Submit',
            color='primary',
            block=True
        ),
    ]
)

but it doesn't really do anything. Here I attach a screenshot of the problem. I guess it can be solved with CSS but I don't really have an idea on how to do it, so I would be glad if any of you can give me a hint.

Best regards.

user_6714627 · Answer

Did you remember to put:

external_stylesheets=[dbc.themes.BOOTSTRAP]

inside the app declaration? Which would contain the bootstrap-specific CSS, for example, which provides lots of necessary CSS for the bootstrap components to work properly. That's almost their whole utility is the CSS styling is all standardized and done for you so that you don't have to. Plus some other neat components not available in dcc or html.

If you did include the stylesheets reference, that's very strange overlap behavior and would be helpful/if not necessary if you could provide either your entire dash project source code (so answered can copy paste and it just works and reproduces the exact same problem you're facing) or better a minimally created version from the source code but I don't mind looking over your whole app to dissect if that'd be helpful

user_5092879 · Answer

As colleague @Siddarth Bhansali said, adding and increasing the z-index worked for me to solve this. Take into account that in Plotly Dash we need to use camelcase for hyphenated property names. In my case the following code worked fine:

dcc.DatePickerRange(
        id='date-picker-range',
        min_date_allowed=min_date,
        max_date_allowed=max_date,
        initial_visible_month=datetime(datetime.today().year, 1, 1).date(),
        # end_date=max_date,
        show_outside_days=True,
        day_size=32,
        display_format='DD/MM/YYYY',
        clearable=True,
        style={'zIndex': 10}
    )

Plotly Dash Date Picker Range show underneath inputs

2 Answers