SingleDatePicker: Can't Set Input Width to 100% of Container

Hi,

I’m using the SingleDatePicker component and need to have the input stretch to 100% of the width of the container my form is in (which is a fluid container, so I can’t use a px/em-based value). The sass variable that appears designed for setting the input’s width, $react-dates-width-input, doesn’t seem to cover this case, because the .DateInput is inside a .SingleDatePicker, which has display: inline-block. Setting the variable to 100% gives the .DateInput a width of 100%, but that’s not 100% of the .SingleDatePicker’s container, due to the inline-block.

[dknell]

@kimfucious I was able to fix the showDefaultInputIcon={true} and block bug by overriding the css (below is sass, so adjust accordingly):

.SingleDatePicker {
    .DateInput__block {
        width: 100%;
        padding-right: 42px;
    }

    .SingleDatePickerInput_calendarIcon {
        position: absolute;
        right: 0;
        padding: 0 10px;
        line-height: 50px;
    }
}

[majapw]

This is now very easy in v15.3.0 by just setting the block prop on the SDP or the DRP 😃