React-select: Styling issues

Created on 15 Jul 2016 · 8Comments · Source: JedWatson/react-select

I am not certain if anyone encountered this with their project.

I do not use frameworks like Bootstrap.

I get some issues with the form field input. It appears smaller than it should be when users start typing.

Here's my fix:

.Select-input {
  padding: 0 !important;
}

.Select-input,
.Select-input input {
  width: 100% !important;
}

.Select-input input {
  text-indent: 10px;
}

Source

kathgironpe

👍7

All 8 comments

Had the same problem and this fixed it.

JanBussieck on 18 Aug 2016

👍1

Same here. Thanks!

raythree on 6 Sep 2016

👍1

Same here, Thanks @katgironpe

alexlopezit on 30 Sep 2016

Thank you! But when clicked in select, it doesn't open.
I have small fix, when select is open.
```css
.Select.is-open .Select-input {
padding: 0 !important;
}

.Select.is-open .Select-input,
.Select.is-open .Select-input input {
width: 100% !important;
}

.Select.is-open .Select-input input {
text-indent: 10px;
}

joinjoohny on 22 Dec 2016

👍1

I would say be careful with that last line

.Select.is-open .Select-input input {
  text-indent: 10px;
}

the text-indent pushes the search text in and it actually gets cut off.

To reproduce attempt to search a few characters and notice that they get cut off. I notice that once you type a few it will correct itself, but the first few get cut off.

Update
I am noticing this is just happening for me on Firefox (51.0.1 mac 64bit). It's fine on chrome

llibdude on 6 Feb 2017

I'm seeing this issue with Chrome 62, and the fix from @joinjoohny seems to have fixed it.

jharris4 on 28 Nov 2017

👍1

@jharris4 Something must have changed. I tested this over a year ago.

kathgironpe on 29 Nov 2017

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.