CODEWITHSUNDEEP
reactjsmaterial-ui
Jay Cee
Jay Cee

Reputation: 1965

reactjs material-ui how to style auto complete which always cover the text field

I have a little problem with auto complete.

I have a lot of data returned by my API and when I type a word in the autocomplete search bar, the dropdown hide the text input.

I tried to override the style:

<AutoComplete
    hintText="For example, Coca-Cola"
    floatingLabelText="Search entities"
    onUpdateInput={this.updateInput}
    dataSource={autoCompleteDataSource}
    filter={this.caseInsensitiveFilter}
    menuStyle={styles}
    ref="searchBox" />


 var styles = {
   top: '53%'
 };

but this doesn't work at all (maybe am I trying to override it in a wrong way?).

Does anyone has an idea about it?

Many thanks!

Upvotes: 2

Views: 2864

Answers (1)

user6661505
user6661505

Reputation: 46

Use anchorOrigin, which is the location of the anchor for the auto complete. It has a default value { vertical: 'bottom', horizontal: 'left' }.

Upvotes: 3

Related Questions