width:100% is not working

[sanjaybora04]

Describe the bug when i use width:100% the input box is not increase its width after 256px

Expected behavior input box should take the size of container when width:100% is used

[luis-cicada]

@sanjaybora04 I'm having the same issue, do you know if there is a fix coming soon?

[balajis-qb]

Hi @luis-cicada / @sanjaybora04

I tried applying the 100% width and it's working fine. I think your code might look like the below one

    <DatePicker
      className={"dp-full-width"}
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showTimeInput
      customTimeInput={<ExampleCustomTimeInput />}
    />

    .dp-full-width {
      width: 100%;
    }

In the above case, we're not getting the result of input being occupied 100% of my screen width. That's because the 100% width, will be relative to it's parent and not to viewport.

To resolve the issue, you can apply 100% width to the parent container of the input by adding wrapperClassName

    <DatePicker
      wrapperClassName={"dp-full-width"}
      className={"dp-full-width"}
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showTimeInput
      customTimeInput={<ExampleCustomTimeInput />}
    />

   .dp-full-width {
     width: 100%;
   }

In the above case I added 100% width to the parent and to the input element. But again the parent of the DatePicker, needs to have full viewport width for the DatePicker to occupy the full width

The other solution will be simple, update the style to use 100vw instead of 100%. vw unit will be always relative to the viewport width, instead of the parent container width.

    <DatePicker
      className={"dp-full-width"}
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showTimeInput
      customTimeInput={<ExampleCustomTimeInput />}
    />

    .dp-full-width {
      width: 100vw;
    }

You can use any of the above techniques to resolve this issue.

Let me know if I misunderstood your issue, else I hope this issue can be closed.

cc: @martijnrusschen

[mednche]

Thanks @balajis-qb, adding wrapperClassName={"dp-full-width"} did the trick for me!

[yuki0410-dev]

The problem appears to have already been solved. If there are no other problems, please close the issue. ( cc: @martijnrusschen )