[AutoComplete]

[hmeerlo]

Description

Can not set width of dropdown
I want an autocomplete field where the searchfield should be smaller than the contents of the dropdown.

Images & references

[finaiized]

You can set a custom width through listStyle:

<AutoComplete
  listStyle={{
    width: 500,
  }}
  hintText="Type anything"
  dataSource={this.state.dataSource}
  onUpdateInput={this.handleUpdateInput}
/>

[hmeerlo]

Ah thanx, I will give it a try. It is very hard to find this out at the moment. I really hope the new styling mechanism coming in 0.16 is making this better (but more importantly that it improves the performance because that should be priority 1 for this project in my opinion).

[aahan96]

@hmeerlo Were you able to resolve the issue with the solution posted above?

[hmeerlo]

Yes partially. You cannot set fullWidth to true because then it won't work. That's too bad because I wanted my searchField to be fullWidth of the enclosing div and the dropdown wider than that.

[hadasmaimon]

You can set a custom width through listStyle:

<AutoComplete
  listStyle={{
    width: 500,
  }}
  hintText="Type anything"
  dataSource={this.state.dataSource}
  onUpdateInput={this.handleUpdateInput}
/>

@oliviertassinari is that listStyle props still exist on the autoComplet component?

[hadasmaimon]

@oliviertassinari what is the alternative of it?

[hadasmaimon]

@oliviertassinari what is the alternative of it?

This is the alternative:

<AutoComplete
  ListboxProps={{ style: { maxHeight: 200, overflow: 'auto' } }}
...
/>