Modifying the CSS of ng2-completer

524 Views Asked by At

I have recently started using ng2-completer in my Angular 5 application and I was following this link 'http://oferh.github.io/ng2-completer/#/native' on how the control works and was not able to get all the functionality.

1) I would like the control to look like this:

enter image description here

When I follow the plunker mentioned in the url (https://www.npmjs.com/package/ng2-completer) I do not get the arrow instead I just get the plain control.

2) When I type something in the control the dropdown holder which has all the items should match the width of the control. The dropdown holder exceeds the width of the control.So when I make the width to 95% the control has increased in width but now the dropdown holder becomes smaller in width. So I would like the dropdown holder to match the width of the control.The screenshot below explains the scenario:

enter image description here

I have followed a lot of links and they suggested to make changes to css for .completer-dropdown and .completer-dropdown-holder but it did not help. I am looking for the control to be displayed like in point# 1 and the holder should be matching the width of the control.

The code that I have is same as it is in the plunker listed in the website for ng2-completer.(https://next.plnkr.co/edit/sVnfpBiEb5jBdtul4ls9?p=preview&preview)

Could you let me know how I could get this control to function according to the requirement posted above.

0

There are 0 best solutions below