0

我在我的网站上使用了Bootstrap Token Field 。它在我的网页上完美运行。但是，当我将该令牌字段放入任何隐藏的 div 时，问题就发生了。我的意思是，想象有一个隐藏的 div( display: none;) 在那个不可见的 div 里面，我已经把令牌归档盒。单击按钮后，隐藏的 div 将可见。那时，如果我注意到令牌字段框的下拉框/自动完成建议框，我会看到该下拉框的宽度无法获得完整的宽度，而在默认状态下它是完美的。我给你看一张图，让你看得更清楚。

这是令牌字段的正常情况：

如果它停留在一个不可见的 div 中，这就是条件。看，根据输入框，下拉框的宽度不是 100%：

这是我的小提琴链接：http: //jsfiddle.net/qV2E2/

单击“显示”链接，使不可见的 div 可见

我不明白为什么会这样！如何使下拉框的宽度类似于输入字段的宽度？

4

2 回答 2

1

如果你想让它工作，试试这个。只需在显示隐藏的 div 后执行 javascript，您将拥有：

<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>

和：

$('.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
});
于 2014-05-16T20:53:36.050 回答
0

您可以使用以下为您单击功能。它使用类获取输入字段的外部宽度，tokenfield并将该宽度分配给另一个输入字段

$('.show').click(function() {
    var width = $('.tokenfield').outerWidth();
    $('.another input').width(width);
    $('.another').slideToggle();
});
于 2014-05-16T21:00:55.103 回答