web-dev-qa-db-ja.com

bootstrap 3で適切に動作しない

bootstrap=モーダルをトリガーし、そのコンテンツを$.load()を介してロードするこのコードがあります。ロードしているページには、呼び出しているselect要素が選択されています。コード：

$('.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();

    });
});

私が得ている結果は次の画像のようなものです：

Modal View

これは私のHTMLコンテンツです：

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

モーダルが表示された後に選択を適用すると、問題が解決するはずです：

$('#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

45
Koen.

これを試してみて、私は選んで掘り下げて、このような「幅」プロパティまたは他の幅の値を持つオプションを渡すだけでよいことがわかりました：

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

Bootstrap modal での使用を選択できるようにする]で説明されているように、問題はchosen.jquery.jsファイル。行435で見つけ、elseステートメント内に次のコードを追加しました。それをチェックして、それは私のために働いた。

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

今日も同じ問題がありましたが、すぐに解決策が必要でした...

これは私の問題です

だから私はこれをしました：

1）問題は「幅」なので、コンソールでこれを見ました

「select」の上でコンソールを見てください

2）新しい「幅」を追加して、すぐにソリューションを作成しました。前の画像からわかるように、クラス「class = "chosen-container selected-container-single」があるため、「Modal」を呼び出すときに「chosen-container」クラスを使用して新しい「幅」を追加しました「ここに私のコード：

1行追加するだけ

だから、基本的に私はこのコードを追加しました：

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

モーダルを呼び出す関数に。これをあなたの機能に自由にコピーして貼り付けてください:)たぶんそれは完璧な解決策ではないかもしれませんが、私にとって、そしておそらくあなたにとってもうまくいくでしょう。

申し訳ありませんが、私は学んでいます。私は英語よりスペイン語が上手です。あいさつ

PD： 私の結果があります

3
MRH

選択したクラスに幅を追加すると、この問題が解決します。

$('.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 !!! */
           }
       });
   });
});
3
Gunasegar

次のソリューションは私のために働いた（ http://codepen.io/m-e-conroy/pen/ALsdF から）：

「モーダル」クラスを再定義します。

.modal { 
    display: block;
}
1
KirEvse