React-dates: Unable to Position/Offset the DatePicker (and fang)

[sscholle]

The style property is being directly set for the datepicker/fang. It is a problem because all my other 'popups' use a different offset.

How can I more closely position of the datepicker to the Input field?

Hint: I'm not looking for an answer with CSS directive !important

[sscholle]

Update:

I discovered an undocumented property: verticalSpacing which can _help_ mitigate the problem. However it looks like the inputHeight calculation is a little bit off

[kashifshamaz21]

@sscholle I'm running into this same issue, and even i figured out looking at the code in DateRangePicker.jsx about the verticalSpacing property. But when i pass the following prop value, for some strange reason, this prop value is being seen as 0 inside the render function of DateRangePicker.

<DateRangePicker
          displayFormat="DD/MM/YYYY"
          startDate={this.props.startDate} // momentPropTypes.momentObj or null,
          startDateId="startDate" // PropTypes.string.isRequired,
          endDate={this.props.endDate} // momentPropTypes.momentObj or null,
          endDateId="endDate" // PropTypes.string.isRequired,
          onDatesChange={this.props.dateRangeUpdated}
          focusedInput={this.props.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
          onFocusChange={this.props.onFocusChange} // PropTypes.func.isRequired,
          hideKeyboardShortcutsPanel={true}
          isOutsideRange={this.isOutsideRange.bind(this)}
          verticalSpacing={10}
        />

Did you get your issue resolved using verticalSpacing ? If so, can you show how you are passing the prop value. Thanks.