CODEWITHSUNDEEP
cssreactjsmaterial-ui
SAN
SAN

Reputation: 326

Fix the height of react-select dropdown list (React Material UI)

I have implemented dropdown using react-select using which on typeahead options are shown, but initially the dropdown list is huge and its occupying whole page . I want to know how to style the react-select dropdown list to fixed height and on overflow provide scroll. react-select

Following is my partial code

class Project extends React.Component {
  render() {
    const selectStyles = {
      input: base => ({
        ...base,
        color: theme.palette.text.primary,
        '& input': {
          font: 'inherit',
        },
      })
    };
    return ( <
      SelectN inputProps = {
        {
          name: 'headedByUserId',
          id: 'headedByUserId',
        }
      }
      classes = {
        classes
      }
      styles = {
        selectStyles
      }
      options = {
        suggestions
      }
      components = {
        components
      }
      value = {
        this.state.fields["headedByUserId"]
      }
      onChange = {
        this.handleChangeDropdown.bind(this, "headedByUserId")
      }
      placeholder = "select owner"

      /
      >
    )
  }
}

Upvotes: 2

Views: 10308

Answers (1)

SAN
SAN

Reputation: 326

react-select has a attribute

maxMenuHeight="200"

using this we can set height of the dropdown list, also if dropdown inside a material dialog you can set dialog property "overflow":"visible" for dropdown to be displayed

Upvotes: 7

Related Questions