드롭 다운 상자의 부트 스트랩 토큰 필드 너비가 보이지 않는 div에 맞지 않습니다.

Question

내 웹 사이트에 Bootstrap Token Field을 사용했습니다. 그것은 내 웹 페이지에서 완벽하게 작동합니다. 하지만 문제는 토큰 필드를 숨겨진 div에 넣을 때 발생했습니다. 내 말은, 숨겨진 div가 있다고 상상해보십시오 (display: none;) 그 보이지 않는 div 안에는 토큰 화 된 상자를 넣었습니다. 숨겨진 div가 버튼을 클릭 한 후 표시됩니다. 그 때 토큰 필드 상자의 드롭 다운 상자/자동 완성 제안 상자가 표시되면 해당 드롭 다운 상자의 너비가 기본 상태에서 전체 너비를 얻을 수 없다는 것을 알았습니다. 나는 너에게 그림을 보여주기 때문에 너는 더 분명해질 수있다.

이 그것이 눈에 보이지 않는 DIV에 머물 않다면 조건입니다 :

이 토큰 필드의 정상 상태입니다. 입력 필드에 따라 드롭 다운 상자의 너비가 아닌, 100 %을 봐 : 여기

내 바이올린 링크입니다 : http://jsfiddle.net/qV2E2/

는 "연락처보기"링크를 클릭하여 볼 수 있도록하는 보이지 않는 div

나는 그것이 일어난 이유를 모른다. 드롭 다운 상자의 너비를 입력란 너비와 비슷하게 만들려면 어떻게해야합니까?

Answer 1

시도해 보려면 this을 시도하십시오. 그냥 당신이 숨겨진 사업부를 표시 한 후 자바 스크립트를 실행, 그래서 당신은해야합니다 :

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

Answer 2

는 다음을 사용할 수 있습니다. 클래스 tokenfield을 사용하여 입력 필드의 바깥 쪽 폭을 가져오고 그 너비를 다른 입력 필드에 할당합니다.

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