Typeahead alignment Issue

问题

I am having alignment issue with my Typeahead control. The issue is that is goes out of my screen. I want to make it little left aligned so that it stays on my screen. Basically it should adjust it's placement according to the length of data. If length of data is more it should further shift it to left.Notice that everything that goes out of dark blue color is badly aligned.

The other issue is , I am actually displaying 3 suggestions in my Typeahead but one is getting hidden behind the blue strip. Sorry I am really new to javascript and CSS. Can someone please help me here.

<form class="navbar-form pull-right">

    <input type="text" placeholder="Search" ng-model="selected" 
         typeahead-on-select="RefreshPersonProfile($item)" 
         typeahead="suggestion for suggestion in persons($viewValue) | filter:$viewValue | limitTo:8" 
         class="form-control">

    <i class="icon-search"></i>
</form>

来源：https://stackoverflow.com/questions/22075432/typeahead-alignment-issue