Bootstrap typeahead not Working inside the Bootstrap Modal

Question

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">&times;</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>

Teddi

Answer 1

You need to put a z-index of 1051 on .typeahead to get it to appear above the modal div.

Tacmahack

thanks for the help but it seems that setting the z-index to 1051 is not working . I think that the javascript that i made for the typeahead will not be included in the DOM when i put it inside the modal. Can anyone help me .Please .. i am using codeigniter and twitter bootstrap. – Teddi

The typeahead is inserted into the dom outside of the modal area, and is showing underneath the modal. I was able to get it to work by adding .typeahead { z-index: 1051; } into bootstrap.css. This is the same trick that dealt with dropdowns not showing in modals (github.com/twitter/bootstrap/pull/1221) – Destruct

+1 They claim the problem has been in the latest version. But its not. I still have the same problem with bootstrap 2.1.1. – Stovall

i'm with 2.2.1 and the problem remains – Supermarket

Since adjusting the z-index alone may not fix it, it might be worth noting to include the overflow-y: visible attribute on .modal-body as per this question: #13768882 – Flugelhorn

Answer 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

Gastronomy

Answer 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

Pearcy

Answer 4

make sure to remove typeahead-append-to-body="true"

https://github.com/angular-ui/bootstrap/issues/3262

Docket

Answer 5

I'm using in my custom css following

.modal-body{overflow-y: inherit;}

.modal-open .dropdown-menu {
  z-index: 2050;
}

working example of use

Malformation

Answer 6

there is an option to append the drop down to the model

 source : function() {},
 select: function (event, ui) {},
 appendTo: "#my-modal"

Pinwheel