Material UI DateTimePicker Rendering In Wrong Spot

I am rendering a new material ui date time picker immediately on page render by enabling the open prop.

<Grid item xs={6} className={styles.CampaignDates_calendar_right}>    <MuiPickersUtilsProvider utils={DateFnsUtils} className={styles.CampaignDates_calendar_right}>     <KeyboardDatePicker        open        disableToolbar        variant="inline"        format="MM/dd/yyyy"        margin="normal"        id="date-picker-inline"        value={date}        onChange={handleDateChange}     />     </MuiPickersUtilsProvider>  </Grid>  

For some reason though it renders in a random part in the screen and I dont get why. What's weirder is as soon as i change a prop in my code and hot reload it immediately snaps into place where its supposed to be.

I see that the calendar is loading with this css

    top: 361px;      left: 126px;  

when i play with these values i can move around the calendar but I am not sure what is triggering these values in the first place.

Here is how I want it looking

Here is how it is looking for some reason

Note: It works fine when I am not using the open prop but I would like to have the calendar open render which is why I am using the open prop.

Thank you

https://stackoverflow.com/questions/66609747/material-ui-datetimepicker-rendering-in-wrong-spot March 13, 2021 at 11:06AM