React-select: Bug: Too much text breaks width

Created on 29 Jul 2016 · 4Comments · Source: JedWatson/react-select

Looks like a long string will make this happen. Seems the component width needs to be passed into react-input-autosize's placeholderIsMinWidth prop.

I'll be happy to do a PR. What do you think is the best course of action?

Source

gojohnnygo

👍7

Most helpful comment

Just stumbled on this issue and didn't like the option of setting a fixed pixel value as max-width since we're dealing with a fluid layout.

Here's my solution, which allows us to set max-width in percentages, pixel or my personal favorite - calc(), the tricky part was just setting table-layout: fixed:

.Select-control {
    table-layout: fixed;
}

.Select-input {
    overflow: hidden;
    max-width: calc(100% - 20px);
}

tsi on 17 Oct 2017

👍10

All 4 comments

alexlopezit on 30 Sep 2016

Just created a PR for it here https://github.com/JedWatson/react-input-autosize/pull/71. Hopefully it'll get merged.

gojohnnygo on 2 Oct 2016

🎉1

Just stumbled on this issue and didn't like the option of setting a fixed pixel value as max-width since we're dealing with a fluid layout.

Here's my solution, which allows us to set max-width in percentages, pixel or my personal favorite - calc(), the tricky part was just setting table-layout: fixed:

.Select-control {
    table-layout: fixed;
}

.Select-input {
    overflow: hidden;
    max-width: calc(100% - 20px);
}

tsi on 17 Oct 2017

👍10

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.