Bootstrap typeahead not Working inside the Bootstrap Modal
Solution 1
You need to put a z-index of 1051 on .typeahead to get it to appear above the modal div.
Solution 2
Edit bootstrap-typeahead.js
:
this.$menu.css({
top: pos.top + pos.height,
left: pos.left,
'z-index': 9999 //maximum z-index
})
Find the highest z-index: http://archive.plugins.jquery.com/project/TopZIndex
Solution 3
I don't know if I'm running into a version-specific issue that's slightly different, but I'm using bootstrap 2.3.2 and no version of z-index was working for me. I found another solution that ended up working:
.modal-body{overflow-y: inherit;}
Found at https://github.com/twbs/bootstrap/issues/1078, answer by jgutix
Solution 4
make sure to remove typeahead-append-to-body="true"
https://github.com/angular-ui/bootstrap/issues/3262
Solution 5
I'm using in my custom css following
.modal-body{overflow-y: inherit;}
.modal-open .dropdown-menu {
z-index: 2050;
}
user1342825
Updated on July 23, 2022Comments
-
user1342825 almost 2 years
I am using codeigniter framework and i am using bootstrap typeahead and all is fine but my problem is when i put it inside the bootstrap modal the bootstrap typeahead will not work. can someone help me? please. this is my code
<a data-target="ajaxify" data-toggle="modal" href="<?php echo base_url()?>task/add_task" class="no-u quick-task"> <h4>Task</h4> <span>This is a simple description</span> </a>
and inside my add_task controller i call the view task_view.php and task.js but it seems that the typeahead is not working inside the bootstrap modal.
this is the content of task.js
$(document).ready(function(){ $("#assign_to").typeahead({ source: [{value: 'Charlie'}, {value: 'Gudbergur'}] }); });
this is the content of task_view.php : just a sample.
<div id="ajaxx" class="modal hide fade"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <!--Your title here --> <h3>Modal Heading</h3> </div> <div class="modal-body"> <form><input type="text" name="assign_to" id="assign_to" /></form> </div> <div class="modal-footer"> <!--Your dont change the attributes only the value here --> <a href="#" id="n0" class="btn n0" data-dismiss="modal">Close</a> <a href="#" id="y1" class="btn btn-primary y1" data-submit="modal">Save</a> </div>