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.

Answer 1

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}
    )