SingleDatePicker misaligned

Hi guys, thanks for maintaining this great lib.

I’m facing this UI issue though:

I don’t know why a left property is being applied to my calendar. left: -292.984px;

And it looks like the z-index is not working even though it uses z-index:1. My footer has position: absolute too and z-index:0;

I’m debugging it for quite a long time and I can’t see anything from my side interfering on the calendar.

I can workaround it applying left:0 to the calendar.

Maybe you guys have any thoughts?

[brunocoelho]

Hi @majapw I appreciate your attention, you don’t need to apologize, remote debugging is pretty hard.

a)

b) In order to fix the position and add some styling:

.deader .SingleDatePicker {
  display: block;
}

.deader .SingleDatePicker .SingleDatePickerInput {
  border: 1px solid #e5e6e7;
}

.deader .SingleDatePicker .SingleDatePickerInput .DateInput {
  color: #9a9a9a;
  font-size: 14px;
  width: auto;
}

.deader .SingleDatePicker__picker.SingleDatePicker__picker--show {
  left: 0 !important;
}

[majapw]

@brunocoelho That makes sense because what I expect the calculated style to be is left: 0 with your particular set-up.

Basically, on componentDidMount (and also whenever you resize the window), the inline styles that are applied get set here: https://github.com/airbnb/react-dates/blob/master/src/components/SingleDatePicker.jsx#L207:L212.

This is somewhat obfuscated but basically this file (https://github.com/airbnb/react-dates/blob/master/src/utils/getResponsiveContainerStyles.js) ends up setting the ANCHOR_DIRECTION value (in this case, left) of the picker based on the window width, and the this.dayPickerContainer.getBoundingClientRect() right value. In your case, for whatever reason the client rect right value is … larger than the window width. This may have something to do with how you’re styling the input to fill the space.

Can you share

(a) the value of document.querySelector('.SingleDatePicker__picker').getBoundingClientRect() (b) what styles you are applying to .DateRangePicker (or anything else) to get it to fill the width of your container?

Sorry for all the back and forth! I think we’re getting closer to a solution (and remote debugging is hard).