, выбранный с bootstrap 3 не работает должным образом

Question

У меня есть этот код, который запускает загрузочный мод и загружает его содержимое через $.load(). на странице, которую я загружаю, есть элемент выбора, который я вызываю. Вот код:

$('.someClick').click(function(e){ 
    e.preventDefault(); 
    x.modal('show'); 
    x.find('.modal-body').load('path/page.html', 
function(response, status, xhr){ 

     if(status =="success") 
     $("select[name=elementName]").chosen(); 

    }); 
}); 

результаты я получаю, как на следующем рисунке:

и это мое содержание Html:

<select name="elementName" data-placeholder="Please work.." class="chosen-select"> 
     <option value="test">Hi</option> 
     <option value="test2">bye</option> 
</select> 

Answer 1

Применяя Избранный после того, как модальный показано должно решить вашу проблему:

$('#myModal').on('shown.bs.modal', function() { 
    $('.chosen-select', this).chosen(); 
}); 

Или когда Избранный уже применяется, уничтожать и повторно:

$('#myModal').on('shown.bs.modal', function() { 
    $('.chosen-select', this).chosen('destroy').chosen(); 
}); 

скрипку здесь : http://jsfiddle.net/koenpunt/W6dZV/

Так что в вашем случае это, вероятно, что-то вроде:

$('.someClick').click(function(e){ 
    e.preventDefault(); 
    x.modal('show'); 
    x.on('shown.bs.modal', function(){ 
     x.find('.modal-body').load('path/page.html', function(response, status, xhr){ 
      if(status == "success"){ 
       $("select[name=elementName]").chosen(); 
      } 
     }); 
    }); 
}); 

---

EDIT

в дополнение к Избранный вы можете использовать Chosen Bootstrap theme

Answer 2

Как описано в Allow Chosen to be used in Bootstrap modal, проблема находится в файле chosen.jquery.js. Я нашел его в строке и просто добавил следующий код внутри оператора else. проверить это, это сработало для меня.

// Fixing problem when the select is not displayed. 
    if (this.form_field.offsetWidth == 0) { 
     return "" + $(this.form_field).width() + "px"; 
    } 

Answer 3

Следующее решение работает для меня (от http://codepen.io/m-e-conroy/pen/ALsdF):

Переопределить «модальный» Класс:

.modal { 
    display: block; 
} 

Answer 4

Попробуйте это, я выкопал в избранных и выяснил, что просто нужно передать параметры со свойством «шириной», как в этом, или любом другом значении ширины:

$("select").chosen({width: "inherit"}) 

Answer 5

Добавление ширины к выбранному классу решит эту проблему.

$('.someClick').click(function(e){ 
    e.preventDefault(); 
    x.modal('show'); 
    x.on('shown.bs.modal', function(){ 
     x.find('.modal-body').load('path/page.html', function(response, status, xhr){ 
      if(status == "success"){ 
       $("select[name=elementName]").chosen({ width:'100%' }); /* add width here !!! */ 
      } 
     }); 
    }); 
}); 

Answer 6

У меня была такая же проблема сегодня, но мне было нужно быстрое решение ...но пихты скриншот моей проблемы:

This is my problem

, так что я сделал это:

1) Проблема в том, "ширина", так что я видел на консолях это

take a look on the console, over the "select"

2) Я быстро сделал решение, добавив новую «ширину». Как вы можете видеть на предыдущем изображении, существует класс «class =» selected-container selected-container-single », поэтому я взял класс« selected-container », чтобы добавить новую« ширину », когда я вызываю свой« Modal » .»Вот мой код:

just add one line

так, в основном я добавил этот код:

$('.chosen-container').css({ 'width':'350px' }); 

к функции, которую называют модальный Вы можете скопировать и вставить это на функцию :). Возможно, это не идеальное решение, но оно работает для меня и, возможно, для вас тоже.

извините за мой английский, но я изучаю. Я лучше говорю по-испански, чем по-английски. Приветствия

PD: There is my result