18

動的な幅のスタイルを使用して、harvethq Chosen ドロップダウンを作成するにはどうすればよいですか?

デフォルトでは幅が固定されており、CSS で変更しようとすると、適切な結果を得るためにいくつかの問題が発生します。

4

12 に答える 12

40

このブログでは、次のことを推奨しています。

$("select").chosen({ width: '100%' }); // width in px, %, em, etc
于 2013-10-02T01:51:01.063 に答える
19

画面に複数の選択ボックスがあっても、これは私にとってはうまくいきました：

$(document).ready(function(){      
   resizeChosen();
   jQuery(window).on('resize', resizeChosen);
});

function resizeChosen() {
   $(".chosen-container").each(function() {
       $(this).attr('style', 'width: 100%');
   });          
}

2019 年編集: この回答は、jQuery が人気のあるライブラリであり、広く使用されていた 4 年前に作成されたことに注意してください。私のアドバイスは、今年以降に作成されたものすべてに純粋な JS を使用することです。それらが書かれた時点で機能していた歴史的な回答を否定しないでください。

于 2015-02-02T11:48:27.060 に答える
6

画面のサイズ変更時に選択したドロップダウンの幅を変更する方法についての私の解決策を共有したいだけです:

まず、CSS に次のスタイルを追加する必要があります。

#form_paciente{
    width: 100% !important;
}

*#form_paciente* は選択 ID です。

その後、ビューに次のスクリプトを追加します。

window.addEventListener("resize", function() {
    $('.chzn-container').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth());
    $('.chzn-search input').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth()-12);
    $('.chzn-drop').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth()-2);  
}, false);

その場合、*#selecciona_paciente_estadisticas_form* は *#form_paciente* のフォーム親 ID です。

それで全部です！

于 2013-06-08T11:21:25.273 に答える
5

上記で一部言及しましたが、次の解決策を指摘したいと思います。

.chosen-container {
    width: 100% !important;
}

このようにして、選択したウィジェットは常に 100% になり、それに応じてサイズが変更されます。他の幅にする必要がある場合は、割合を変更するか、選択自体を別の要素でカプセル化し、代わりにその要素の幅を設定します。

于 2016-09-25T11:06:26.847 に答える
1

@MSánchezの回答に基づいて、IDを参照せずに、より一般的になるように次のように記述しました。

function processChosenContainer(myme) {
    myme.innerWidth(myme.parent().innerWidth() - 30);
}

function processChosenSearch(myme) {
    myme.innerWidth(myme.parent().parent().parent().innerWidth() - 13);
}

function processChosenDrop(myme) {
    myme.innerWidth(myme.parent().parent().innerWidth() - 32);
}

window.addEventListener("resize", function () {
    //******Adjust Container Width********/
    var myObj = $('.chosen-container');
    myObj.each(function () {
        processChosenContainer($(this));
    });
    //******Adjust input search Width********/
    var myObj2 = $('.chosen-search input');
    myObj2.each(function () {
        processChosenSearch($(this));
    });
    //******Adjust drop Width********/
    var myObj3 = $('.chosen-drop');
    myObj3.each(function () {
        processChosenDrop($(this));
    });
}, false);

また、select 要素「chosen-select-responsive」に次のように追加します。

.chosen-select-responsive {
width: 100% !important;
}

繰り返しますが、これは MSánchez の回答に基づいたものにすぎません。thnx

于 2016-05-29T00:38:20.587 に答える
0

これが私がそれをした簡単な理由です。

JS:

// Create Chosen Select Menus
setUpSelectMenus();

// Reset Chosen Select Menus when window changes size
window.addEventListener( "resize", function() { setUpSelectMenus(); } );

/**
 * Settings for Default Chosen Select Menus
 */
function setUpSelectMenus(){

    $( '.chosen-select' )
        .chosen( "destroy" ) // Need this to make responsive
        .chosen(
            {
                allow_single_deselect   : true,
                disable_search_threshold: 10
            }
        );
}
于 2016-09-05T19:12:57.900 に答える
-1

私にとって、それが実際に機能したのはこれでした：

function resizeChosen() {
    var chosen = $("#dropdown_chosen");
    var max = chosen.parent().width();
    var currentWidth = chosen.width();
    var now = currentWidth + 20 / 100 * currentWidth;

    if (now <= max) {
        $("#dropdown_chosen").attr('style', "width: " + now + "px");
    }
}

および document.ready 内

dropdown.chosen().change(function() {
    resizeChosen();
});

dropdown はドロップダウンの ID です。変更イベントで幅の減少を設定することもできます。#dropdown_chosen は、次のように selected によって作成されます。

dropdown - ドロップダウン ID append _chosen

于 2015-05-24T09:25:14.113 に答える