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?

score 1 · Accepted Answer · answered May 16 '14 at 20:53

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
});

score 0 · Answer 2 · answered May 16 '14 at 21:00

You can use the following for you click function. It gets the outer width of the input field with the class tokenfield and assigns that width to the other input field

$('.show').click(function() {
    var width = $('.tokenfield').outerWidth();
    $('.another input').width(width);
    $('.another').slideToggle();
});

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

2 Answers2