CODEWITHSUNDEEP
reactjsreact-day-picker
Lambert
Lambert

Reputation: 2433

React Day Picker calendar overlay pops up behind other components

How do I make the calendar overlay popup for the react day picker input field show on top of the other form components? The calendar is being hidden by the other form components. Is there some sort of z-index that I can set somewhere?

<DayPicker.Input
    name={this.id}
    placeholder="MM/DD/YYYY"
    format="M/D/YYYY"
    value={this.value}
    onDayChange={this.handleDayChange.bind(this)}
    dayPickerProps={datePickerProps}
/>

Upvotes: 9

Views: 5932

Answers (2)

Adi Dasler
Adi Dasler

Reputation: 538

Also, you can use Portals with a custom overlay component (props - overlayComponent) to render it on top of everything. But it can cause a problem with the positioning component, so I recommend use Popper of material-ui as custom overlay component because it showing in the free space area on the screen. See codesandbox example.

Example: https://codesandbox.io/s/optimistic-glitter-c77gb?file=/src/DateRangePicker.js

Upvotes: 0

gpbl
gpbl

Reputation: 4804

The overlay has a DayPickerInput-Overlay class which is absolutely positioned: you can add a z-index to that to make the overlay on the top of other elements.

Upvotes: 10

Related Questions