Positioning of react-date-picker

Hi,

I am using this library and like it for it’s simplicity and easy to use features. And now am stuck at one point. Check the image attached date picker

As you can see the top part is hidden behind my menu bar.

How can I position it to open somewhere else or modify the css myself to adjust it’s position.

I have made a reusable component using this date picker, code is below:

import React from 'react';
import DatePicker from 'react-date-picker';

const CustomDatePicker = ({dtVal, handleChange}) => {
  return (
      <>
        <DatePicker
          onChange={handleChange}
          value={dtVal}
          clearIcon={null}
          format="dd/MM/yyyy"
          className="mr-2"
        />
     </>
  );
};

export default CustomDatePicker;

And it is being used like this:

<LabelContainer className="mr-2"> Visited On:</LabelContainer>
<CustomDatePicker 
  calendarClassName="calender-custom-position" 
  className="ml-4" 
  dtVal={visitDate}
  handleChange={onDateChange}
/>

[sullyslegacy]

I agree had to add

.react-date-picker__calendar--open {
  top: 100% !important;
  bottom: unset !important;
}

so Date Picker always shows under input

[benesva4]

Try to give it position: fixed;