Bootstrap 3 fancyfile breaks при использовании в tab-панели

Question

Я использую плагин fancyfile jQuery для Twitter Bootstrap 3.2 (http://plugins.upbootstrap.com/bootstrap-fancyfile/) на тему ввода файлов в файл, чтобы быть более похожим на Bootstrap.

При использовании его на входе в tab-pane, который не является видимой вкладкой при нагрузке, входные разрывы; Он становится узким, текст заполнителя исчезает, и щелчок правой части входа может вызвать отправку формы. В чем конфликт и есть ли способ исправить это?

jsFiddle: http://jsfiddle.net/dbailey/bv2swf2t/1/

<div class="container"> 
    <ul class="nav nav-tabs"> 
       <li class="active"><a href="#main" data-toggle="tab">Description</a></li> 
       <li><a href="#photos" data-toggle="tab">Photos</a></li>         
       <li><a href="#contributors" data-toggle="tab">Contributors</a></li> 

      </ul> 
    <div class="tab-content"> 
     <div class="tab-pane in active fade" id = "main"> 
      <input type="file" class="fancyfile"></input> 
     </div> 
     <div class="tab-pane fade" id = "photos"> 
      <input type="file" class="fancyfile"></input> 
     </div> 
     <div class="tab-pane fade" id = "contributors"> 
      <input type="file" class="fancyfile"></input> 
     </div> 
    </div> 
</div> 

<script> 
$('input.fancyfile').fancyfile({ 
    text: 'Select File', 
    icon: '', 
    style: 'btn-primary', 
    placeholder: 'Select File…' 
}); 
</script> 

Answer 1

Я не мог найти точный источник конфликта. Так или иначе, ширина устанавливается на 11px на вторых двух вкладках. Текст заполнителя все еще существует, вы просто не можете его увидеть из-за размера окна.

Вот простое исправление: просто вручную установите ширину поля ввода с помощью css. Вы должны поставить флаг важности, чтобы сценарий не переопределял его.

.fake-input { 
    width: 188px !important; /* same as first one 
} 

скрипку: http://jsfiddle.net/bv2swf2t/2/

редактировать: После прочтения вашего комментария и смотреть снова, причина, по которой кнопка не работает в том, что текущая кнопка не делает ничего. Предполагается, что вход «fancyfile» будет занимать ширину входа и кнопку, что открывает диалог «выбрать файл». По некоторым причинам, ширина становится установлено значение 0px в закладках 2 и 3. Исправление аналогично выше:

.fancyfile { 
    width: 280px !important; /* same as first one 
} 

Это расширяет окно ввода на кнопку, и соответствует функциональности первой коробки.

Надеюсь, это поможет!