Solvedreact datepicker input width will not adjust to 100%

I am attempting to adjust the width of the react-datepicker input box and surprisingly have found little information out there and am unable to effect it's width. I would just like to make the input width 100% of it's containing div.

Expected behavior

The width should expand to the width of it's parent container.

My react-datepicker

<div className="myContainer">
  <DatePicker
    className="myDatePicker"
    fixedHeight
    readOnly={true}
    isClearable={false}
    placeholderText="My date"
    selected={this.props.defaultValue}
    onChange={(date) => this.props.handleDateChange(date)}
  />
</div>

Expected behavior

The following should result in the myDatePicker being the same width as the parent myContainer, but the width remains unchanged.

.myContainer {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  flex: 1 1 0px;
}

.myDatePicker {   
  width: 100%;  // note: if I change this value to a fixed value (such as 500px) then the width is effected
}

Closest Alternative attempt

The closest attempt was this, but it effects the width of the popup as well, causing it to stretch beyond the length of the entire screen, so this does not work as a solution either:

.myContainer div {
  width: 100%;
}

I have tried all of the following

.myDatePicker {   
  width: 100%;
}

.myDatePicker * {   
  width: 100%;
}

.react-datepicker__day-name, .react-datepicker__day {
  width: 10.9em;
}

/* .myContainer div:not(.react-datepicker-popper, .react-datepicker__week) { */
/* .myContainer .react-datepicker__input-container, .myContainer, .myContainer .react-datepicker-wrapper, .myContainer { */
/* .myContainer.react-datepicker__input-container, .container, .container.react-datepicker-wrapper, .container {  */
 .react-datepicker__input-container, .react-datepicker-wrapper, .container {
  width: 100%;
}

.container .react-datepicker__input-container, .container, .container .react-datepicker-wrapper, .container div {
  width: inherit;
}

.react-datepicker__input-container {
  width: 100%;
}

.container .react-datepicker-wrapper .react-datepicker-wrapper,
.container div:not(.react-datepicker-popper *) {
  width: 100%;
}

.container, .myDatePickerWrapper, .container .react-datepicker-wrapper, .container .react-datepicker__input-container {
.myDatePicker, .myDatePickerWrapper, .container .react-datepicker-wrapper, .container .react-datepicker__input-container {
  background: red;
  width: 100%;
  & :global .react-datepicker__input-container {
    width: 100%;
  }
}

.container, .react-datepicker-wrapper, .react-datepicker__input-container {   
  width: 100%;
}
.myDatePicker, .react-datepicker-wrapper, .react-datepicker__input-container {
  width: 100%;
} 

Actual behavior

The date picker remains the same length, unless a specific px value is set for the width.

Is this a bug? Does anyone understand how to set the input width to 100% for react-datepicker?

13 Answers

✔️Accepted Answer

I was able to achieve this by setting the wrapper and input-container to be display: block (instead of the default display: inline-block)

.react-datepicker-wrapper, .react-datepicker__input-container {
  display: block;
}

Other Answers:

For me this works:

.react-datepicker-wrapper, .react-datepicker__input-container { display: block; }
.MyClass .react-datepicker-wrapper .react-datepicker__input-container input { width: 100% }
2yk
46

I was able to achieve this by setting the wrapper and input-container to be display: block (instead of the default display: inline-block)

.react-datepicker-wrapper, .react-datepicker__input-container {
  display: block;
}
display: block !important;

Adding important works for me.
Thanks

SOLUTION #1445 (comment)
.react-datepicker-wrapper, .react-datepicker__input-container { display: block; }
.MyClass .react-datepicker-wrapper .react-datepicker__input-container input { width: 100% }

More Issues: