Dash Mantine DatePicker dropdown rendering problem

Dash Python
1

I’m using a DatePicker from dash-mantine-components in a dbc.Form on a dash-design-kit Modal component. The DatePicker calendar dropdown isn’t rendered properly making it difficult to see the dates.

image
image697×523 14.1 KB

How can I fix this?

2

Hello @NMamathaG,

Welcome to the community!

There is a known issue with how this is being done, please contact your Plotly Services rep to aid. I believe the styling of ddk interferes with the styling of dmc.

3

@jinnyzor thanks for your swift response. I’ll try to contact Plotly support.

1 Like
4

In case you still have the problem, make sure that DatePicker component fits his parent container. In other words, make your model component bigger in size. I had the similar problem, and as @jinnyzor indicated it is a very prevalent issue.

Cheers!
Welcome to the community!

5

I was able to fix this with the help of dmc styles API. Adding the following to style.css fixed it:

“”"
.mantine-DatePicker-calendarHeader {
width: 300px !important;
}

.mantine-DatePicker-month {
width: 300px !important;
}
“”"

image
image361×509 9.24 KB

2 Likes
6

hi @jinnyzor @AnnMarieW:
I would like to use the feffery_antd_components library to embed AntdDatePicker within Dash AG Grid. I hope to have the date selection dialog open with a single click, but currently, it always requires a double-click. Please advise.

table = dag.AgGrid(
    columnDefs=[
        {"headerName": "id", "field": "id", "hide": True},
        {
            "field": "date",
            "headerName": "date",
            "cellEditor": {"function": "AntdDatePicker"},
            "cellEditorPopup": True,
            "singleClickEdit": True,
        }])


ReactDOM.render(React.createElement(window.feffery_antd_components.AntdDatePicker, {
    options: params.values, 
    value: params.value, 
    ref: this.ref, 
    setProps, 
    style: {width: params.column.actualWidth},
}), this.eInput)

// allows focus event
this.eInput.tabIndex = "0"

// sets editor value to the value from the cell
this.value = params.value;
}
// gets called once when grid ready to insert the element
  getGui() {
return this.eInput;
}

focusChild() {
// enter keyboard event
const keyboardEvent = new KeyboardEvent('keydown', {
    code: 'Enter',
    key: 'Enter',
    charCode: 13,
    keyCode: 13,
    view: window,
    bubbles: true
});

// needed to delay and allow the component to render
setTimeout(() => {
    var inp = this.eInput.getElementsByClassName('ant-picker-input')[0]
    inp.tabIndex = '0'
    inp.focus()

    // disables keyboard event
    this.params.colDef.suppressKeyboardEvent = (params) => {
           const gridShouldDoNothing = params.editing
           return gridShouldDoNothing;
       }
    // shows dropdown options
    inp.dispatchEvent(keyboardEvent)
}, 100)

}