Is it possible to add scroll functionality on auto complete?

[AkoSiJohnJames]

IMPORTANT I have a Ng2AutoComplete field that handles 51 states. My question is it possible add a scrolling functionality in autocomplete? If yes, how can I add it to my html?

Current behavior When the field is clicked, user can only see 10 or so states and terminates at the end of bottom frame of html.

Expected/desired behavior Scrolling functionality to enable user to view states.

html code

[crh225]

see #76 says it is implemented awaiting validation

[AkoSiJohnJames]

@crh225 hi, i tried what is on the solution but its not working for me. upon using the inspect on goggle chrome, the style that was on issue 76 was not set on the auto complete. what else can i do?

below is html code: <input id="state" auto-complete type="text" class="form-control" [(ngModel)]="searchRequest.state" [source]="states" name="state" />

and i included the style like in issue 76, above the closing tag of head

help pls. thank you

[cmoyer]

@AkoSiJohnJames I just ran into the same issue. If you're still having the issue, based on the code you have here, your html should be as follows: <input id="state" ngui-auto-complete type="text" class="form-control" [(ngModel)]="searchRequest.state" [source]="states" name="state" />

The issue I ran into was when I added .ngui-auto-complete ui {}, it wasn't picking up the changes. What I found worked as a solution was to wrap the input in a div and gave the div a custom css class. Then in the css, used the following:

.myDivName /deep/ .ngui-auto-complete ui {max-height: 200px; overflow-y: auto;}

Because you are adding the ngui-auto-complete component to your own custom component, you need to use the /deep/ css selector to access the properties found in the ngui-auto-complete component.

Hope this helps!

[nukec]

If you clearly check the source code you will see that name of class is different as how people suggest here. Check this: https://github.com/ng2-ui/auto-complete/blob/master/src/auto-complete.component.ts#L13

If you use angular-cli put this into root styles.css: .ngui-auto-complete ul {max-height: 200px; overflow-y: auto;}

[webcat12345]

@cmoyer 's solution should work.