1

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>

enter image description here

Kees de Kooter
  • 7,078
  • 5
  • 38
  • 45
user911
  • 1,509
  • 6
  • 26
  • 52
  • can anyone please guide me here. – user911 Feb 27 '14 at 18:37
  • Check your css code & also look for Z-index for the blue strip – Sai Feb 28 '14 at 09:57
  • Thanks @Sai - I didn't know about z-index. This is exactly what I need. could you please give me some sample code snippet of how to use it typeahead. I tried few examples but it's not working for me. – user911 Mar 01 '14 at 23:34
  • To be precise , I added this in my css file .typeahead { position:relative !important; z-index:10000; } I want to know if I need to refer this css class in my typeahead control like class="typeahead" or will it get picked automatically. – user911 Mar 02 '14 at 01:21

0 Answers0