drop down box's width of bootstrap token field can't be fit in a invisible div

Question

I've used Bootstrap Token Field at my website. It works perfectly at my webpage. But, problem happened when I put that token field into any hidden div. I mean, imagine there is a hidden div(display: none;) Inside that invisible div, I've put the token filed box. That hidden div will visible after clicking a button. At that time, if I notice the dropdown box/autocomplete suggestion box of the token field box, I see that the width of that dropdown box can't get a full width where at the default state it's perfect. I'm showing you a picture so that you can be more clear.

This is the normal condition of token field:

This is the condition if it's stayed in a invisible div. Look, the width of drop down box isn't 100% according to the input field:

Here is my fiddle link: http://jsfiddle.net/qV2E2/

Click the "Show" link, to make visible the invisible div

I don't understand why it's happened! How can I make the drop down box's width similar to input field's width?

Answer 1

Try this if you want to make it work. Just execute the javascript after you display the hidden div, so you will have:

<div class="default">
    <input type="text" class="form-control tokenfield1" value="" />
</div>
<a href="#" class="show pull-right">Show</a>
<div class="clearfix"></div>
<div class="another">
    <input type="text" class="form-control tokenfield2" value="" />
</div>

And:

$('.show').click(function() {
    $('.another').slideToggle();
    $('.tokenfield2').tokenfield({
  autocomplete: {
    source: ['Red City','Blue City','United Kingdom','Australia','United Sates','Finland','Bulgeriya','Hungary','Istambul'],
    delay: 100
  },
  showAutocompleteOnFocus: true
});
});

$('.tokenfield1').tokenfield({
  autocomplete: {
    source: ['Red City','Blue City','United Kingdom','Australia','United Sates','Finland','Bulgeriya','Hungary','Istambul'],
    delay: 100
  },
  showAutocompleteOnFocus: true
});