React-dates: Input field looks wrong if global box-sizing is not set to border-box

Created on 25 Oct 2017 · 5Comments · Source: airbnb/react-dates

Shouldn't this component set box-sizing: border-box itself, if that's what's required for it to look as expected?

Source

mifi

Most helpful comment

Wouldn't it work to make it global, but for the specific components? @majapw, @mifi
If so, I can add a PR to add this to the .css file.

.DateRangePicker *, .SingleDatePicker *, .DayPickerRangeController * {
  box-sizing: border-box;
}

ndhays on 15 Nov 2017

👍3

All 5 comments

Hi @mifi, you are probably right in that it should at the least be documented. I think the reason that we rely on box-sizing to be set to border-box in the environment rather than explicitly setting it on each element that needs it is ... honestly because the latter would be quite annoying. There are a lot of elements that have explicitly set padding and border in the repo. X_x

It would probably be good to at least mention that in the README or to go through and do the legwork in the repo. This is fairly low-priority for me rn, but I'd be happy to accept a PR!

majapw on 25 Oct 2017

I agree that this is a big change. I added a PR for an explanation in README.md: #815

mifi on 31 Oct 2017

Wouldn't it work to make it global, but for the specific components? @majapw, @mifi
If so, I can add a PR to add this to the .css file.

.DateRangePicker *, .SingleDatePicker *, .DayPickerRangeController * {
  box-sizing: border-box;
}

ndhays on 15 Nov 2017

👍3

The ReadME.md should not recommend setting box-sizing: border-box for every component, this is obviously bad css. I don't see why you can't just do what @ndhays suggested internally.