CODEWITHSUNDEEP
reactjsreact-select
user10454516
user10454516

Reputation: 1143

stop make react-select width expanding while user typing

i'm using react-select. But, somehow, when user typing so much character, the input container is growing horizontally and even its break the screen (the width over the screen). How to make the width is static in every condition? example condition is when user typing or when the value that displayed in the option is too long, I want it to only display some of the character, for example:

real string: 'hello this is option one dude', displayed in the option and in the input container: 'hello this is option.....'

is it achievable? how to do it? I've try this but not working.

here is the full code of styling for the react-select:

const styles = {
  option: (base, state) => ({
    ...base,
    backgroundColor: state.isSelected ? 'grey' : 'grey',
    color: state.isSelected ? 'white' : 'black',
    ':active': {
      backgroundColor: state.isSelected ? 'grey' : 'grey',
      color: state.isSelected ? 'white' : 'white',
    },
  }),
  control: (base, state) => ({
    ...base,
    background: 'white',
    borderRadius: 0,
    borderTop: 0,
    borderLeft: 0,
    borderRight: 0,
    borderColor: state.isFocused ? 'black' : 'black', // disable blue color in the box when input focused
    boxShadow: state.isFocused ? 0 : 0,
    whiteSpace: 'nowrap',
    width: '100%',
  }),
  menu: base => ({
    ...base,
    borderRadius: 0,
    hyphens: 'auto', // beautify the word cut by adding a dash see https://caniuse.com/#search=hyphens for the compatibility
    marginTop: 0, // kill the gap
    textAlign: 'left',
  }),
  menuList: base => ({
    ...base,
    padding: 0, // kill the white space on first and last option
    backgroundColor: 'grey',
    maxHeight: '80px',
    overflowY: 'auto',
  }),
  indicatorSeparator: base => ({
    ...base,
    display: 'none',
  }),
  dropdownIndicator: (base, state) => ({
    ...base,
    transition: 'all .2s ease',
    transform: state.isFocused ? 'rotate(180deg)' : null,
  }),
  noOptionsMessage: base => ({
    ...base,
    color: 'white',
  }),
  valueContainer: base => ({
    ...base,
    overflowX: 'hidden',
    display: 'inline-block',
  }),
  input: base => ({
    ...base,
    display: 'inline-block',
  }),
};

thank you!

Upvotes: 0

Views: 1740

Answers (1)

Shadab Ahmed
Shadab Ahmed

Reputation: 576

can you add below styles to your input element (assuming it is valueContainer and check if it hides the overflow

{
display: block;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

Upvotes: 1

Related Questions