Using Bootstrap typeahead in an accordion panel

I was recently creating a quick prototype when I came across this issue. If you place an input of type text inside a Bootstrap accordion, the typeahead popup is likely to get cut off by the hidden overflow on the accordion panel containing it.

The popup is being cut off by the hidden overflow value

In the image above, you should be able to see 8 test clients. As you can see, the overflow value being set on the “Advanced Options” accordion panel means you only see the first 5. The z-index being set on the ul element that typeahead pops up is of no use due to the setting of the overflow value on the parent div.

I had a look around online to see how people were getting around this issue and it was the following issue on Github that pointed me in the right direction. HOWEVER, this did not solve it for me. The following link requires you include the Twitter typeahead.js file which is different to the Bootstrap typeahead plugin included in the bootstrap.js file and you will experience some weird behaviour! https://github.com/twitter/typeahead.js/issues/273

As I said, that solution helped point me in the right direction. The events being used in the jsFiddle example linked to on the github issue page above, do not exist in the Bootstrap typeahead. So I came up with the following code to fix this issue for me, without me needing to include the Twitter typeahead.js file.

$("input.typeahead").on("keydown", function () {
   $(this).closest(".accordion-body").css("overflow", "visible");
}).on("blur", function () {
   var input = this;
   setTimeout(function () {
      $(input).closest(".accordion-body").css("overflow", "hidden");
   }, 200);
});

My code picks up all input elements with the class “typeahead” which if you’re using Bootstrap, your input elements will have. On the keydown event, it sets the overflow value of the parent div with a class of “accordion-body” (again which you will have if you’re using Bootstrap) to “visible”. On blur, it saves the firing input (this) to a variable (this is just so that it can be used in the setTimeout function). I’ve then had to set a short timeout. This is because if you don’t, the overflow is set back to “hidden” before the click on your option registers. Therefore if you click on an option outside of the accordion panel, it isn’t registered and your text box remains blank. This short timeout just allows that click to fire before setting the overflow value for the accordion panel back to hidden. The accordion will now continue to function as expected.  So now we get this…

The popup now overflows over the containing div

I realise this is a little bit hacky, but until Bootstrap includes the same events in their version of typeahead as the twitter-typeahead file, it is a solution. There are rumours that in version 3 of Bootstrap, they will be using the full version so we’ll have to wait and see if that’s true.

I don’t want to make this post huge by putting in all of the HTML. My accordion is the same as the template given in the Bootstrap documentation here – http://twitter.github.io/bootstrap/javascript.html#collapse

My typeahead controls are the same as the templates given in the Bootstrap documentation here – http://twitter.github.io/bootstrap/javascript.html#typeahead

Here is my solution in JSFiddle – http://jsfiddle.net/flurg/FX66C/3/

Hope this helps someone! If you need any more help with this, leave a comment and I’ll see if I can help.