typeahead on bootstrap 3

Question

Currently I'm using this typeahead but it display like this:

enter image description here

Ist possible to display the typeahead, same width as the input?

What I tried so far is:

.dropdown-menu {    
    display: block; position: static; width: 100%; 
}

But this break the lower fields

enter image description here

Check my fiddle

UPDATE:

I tried both of @neel shah and @shin solution and this is the result. I don't know why in the fiddle is not looking this way

enter image description here

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

Try this. Hope it helps.

.dropdown-menu { width: 100%; }

UPDATE: Check this out.

edited May 23 '17 at 11:57

Community

answered Apr 21 '14 at 07:25

shin

please see the accepted answer it might help you. http://stackoverflow.com/a/18171568/3518203 – shin Apr 21 '14 at 08:32
1

In the end I used the accepted answer on @shin's comment – newbie Apr 23 '14 at 15:55

score 1 · Answer 2 · answered Apr 21 '14 at 07:28

1

The problem is with position: static you just need to remove it from the css

Check this FIDDLE

.dropdown-menu { display: block; width: 100%; }

answered Apr 21 '14 at 07:28

neel shah

score 0 · Answer 3 · answered Apr 21 '14 at 07:43

0

$('.typeahead').typeahead({})
on('typeahead:opened',function(){$('.dropdown-menu').css('width',$('.typeahead').width() + 'px');});

answered Apr 21 '14 at 07:43

4dgaurav

I tried this with this code `$('#itemLaborCode').typeahead({name: 'example',source: ['item1','item2','item3','item4','item5','item6']}).on('typeahead:opened',function(){$('.dropdown-menu').css('width',$('#itemLaborCode').width() + 'px'); });` but still not working – newbie Apr 21 '14 at 07:49
The event is not firing I tested it. Can you give more detail? – newbie Apr 21 '14 at 07:55
$('.typeahead').typeahead({ remote: 'path/to/url' }).on('typeahead:opened',function(){$('.dropdown-menu').css('width',$(this).width() + 'px');}); – 4dgaurav Apr 21 '14 at 08:01
check [this](http://jsfiddle.net/J4Emc/1/) out. I updated my fiddle the event is not firing. – newbie Apr 21 '14 at 08:21
Are you using the "old" Twitter Bootstrap 2 plugin with the new Bloodhound suggestion engine: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26 – 4dgaurav Apr 21 '14 at 08:36
I exactly don't know but what I'm using is [this](https://github.com/bassjobsen/Bootstrap-3-Typeahead). It is not specified what is he using – newbie Apr 21 '14 at 08:56

3 Answers3