react-date-picker falls below inputs in bootstrap forms on small screens

[Omortis]

Hello,

Nice component, it works very well. However at smaller breakpoints the component itself seems to drop below other inputs? Possibly a z-index issue? See attached.

This is a fairly vanilla Bootstrap 3 form layout.

Not sure where to start to debug it. Any suggestions?

react 16.2.0
react-date-picker 6.5.2

Thanks!

John

[wojtekmaj]

Hey!
It seems like you have some elements that are, just like the calendar in React-Date-Picker, positioned using position: relative or absolute.

There can be two cases:

1. They cover the calendar because both calendar and elements covering it have no z-index value set. In this case, elements that come after calendar in HTML structure will cover it. Apply z-index: 1 to .react-date-picker__calendar.
2. Elements covering the calendar have some z-index value set and because of that calendar is covered.
   Check how big is z-index value of elements covering the calendar. Apply z-index with a value higher than in elements covering to .react-date-picker__calendar.

[Omortis]

Will check ASAP. Ran out of time but will be back on Wednesday.

[wojtekmaj]

No problem. I'll be happy to reopen if you'd still need help!

[Omortis]

@wojtekmaj: setting z-index (option #1 above) worked fine - thanks!