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

[ethanresnick]

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.

[Jucesr]

Hi @ethanresnick . Were you be able to achieve this?

[ethanresnick]

@Jucesr Yes, but only by overriding more styles than just the Sass variables support. (Once you do that, it's pretty easy.) See the thread in #474 for context on that approach.

[majapw]

The new block styling I am working on should accomplish this more easily!

On Thu, Nov 30, 2017, 12:52 PM Ethan [e-mail] wrote:

@Jucesr https://github.com/jucesr Yes, but only by overriding more
styles than just the Sass variables support. (Once you do that, it's pretty
easy.) See the thread in #474
https://github.com/airbnb/react-dates/issues/474 for context on that
approach.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/react-dates/issues/535#issuecomment-348317213,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABUdtfovEhIghqyksuaDNtr843r7rGcZks5s7xV-gaJpZM4No7t1
.

[majapw]

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

[kimfucious]

What if you add the showDefaultInputIcon={true}? I get the icon and the date field stacked. Where can that be adjusted to have the both fit on one line at full width?

[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;
    }
}