Mantine Components DATEPICKER only shows the date selector inside the Card

Dash Python
1

Hello Everyone,

I have the problem that at the moment of clicking in the DatePicker to select the date range the selection display only appears within the Card limits, and because the card size is very small I cant see the entire date selection display.

image

this is my code:

post_date_range = dmc.DateRangePicker(id = 'post_date_range',
    inputFormat="DD-MM-YYYY",
    label="Post-date",
    value=[post_ini_date, post_end_date],
    minDate=dfa.Datetime.min(),
    maxDate=dfa.Datetime.max(),
    size='xs',                              
)
card_content1 = dmc.Card(children=[dmc.Text("Metric", 
                                            weight=500,
                                            #size="sm",
                                            #color="dimmed",
                                           ),
                                    
                                    metrics_dropdown,
                                    html.Br(),
                                    dmc.Text("Time-Frame", 
                                            weight=500,
                                            #size="sm",
                                            #color="dimmed",
                                           ),
                                    html.Br(),
                                    dmc.Text("1) PRE date", 
                                            weight=500,
                                            #size="sm",
                                            #color="dimmed",
                                           ),
                                    pre_date_range,
                                    html.Br(),
                                    dmc.Text("2) POST date", 
                                            weight=500,
                                            #size="sm",
                                            #color="dimmed",
                                           ),
                                    post_date_range,
                                    html.Br(),
                                    ],
                            withBorder=True,
                            shadow="sm",
                            radius="md",
                            style={"width": 200},
                        )
app.layout = dmc.Container(
    [
                dmc.Center([title], style={"text-align": "center", "margin": "auto"}),
                
                dmc.Grid(children=[dmc.Col(dmc.Card(card_content1, bg="light"), span=3),
                                   dmc.Col(dmc.Card(graph1), span=12)]),
],

)
2

Hey @moyaverdugo so basically you are asking if the minimum size of the date picker can be decreased?

3

Hi AIMPED, thanks for replying back to my inquiry.
Happy new year in advance.

What I would like is that the “selection window” for the dates trespasses the card borders.
For whatever reason, the “calendar overlay” appears to cut off within the card limits. It is constrained by the card dimensions.
I dont know if I am explaining myself well.

I would like the “calendar overlay”/“selection window” to show in its full dimension no matter how small the card in which the date selector is located is.