web-dev-qa-db-ja.com

選択したHarvesthQは幅を動的にサイズ変更します

動的な幅のスタイルを持つHarvesthQ Chosenドロップダウンを使用するにはどうすればよいですか？

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

jquerydrop-down-menuwidthjquery-chosen
16
MSánchez

画面のサイズ変更で選択したドロップダウンの幅を変更する方法についての私のソリューションを共有したいだけです：

まず、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です。

それで全部です！

6
MSánchez

このブログ 以下をお勧めします：

$("select").chosen({ width: '100%' }); // width in px, %, em, etc
37
Vinay Raghu

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

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

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

2019年。編集：この回答は、jQueryが人気のあるライブラリであり、広く使用されていた4年前に作成されたことに留意してください。私のアドバイスは、今年以降に行われるすべてに純粋なJSを使用することです。執筆時点で有効だった過去の回答を無視しないでください。

18
Vladimir Jovanović

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

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

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

3
Tormod Haugene

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

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

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

繰り返しになりますが、これはMSánchezの回答の一部にすぎません。 thnx

1
Reem

メディアクエリや!importantなどのCSSルールがたくさんあるレスポンシブフォームがあり、クラス継承オプションで選択して使用していました。サイズを変更すると、選択したCSSと親のCSSの間に競合が発生し、問題が発生することがありました。私は私のために働く簡単な解決策を思いつきました：すべてのウィンドウのサイズ変更で選択したdomを再作成します：

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


function doResize() {
     // Parent website's code, that would also reorganize select elements on the page
    jQuery("select.my-select").removeAttr("style"); // Remove display:none style added by chosen
    jQuery("select.my-select").removeClass("chzn-done"); // Remove chzn-done class added by chosen

    jQuery(".chzn-container").remove();
    jQuery("select.my-select").chosen({
                 width: '100%',
                 disable_search_threshold: 10,
                 inherit_select_classes : true
               });
}
1
workwise

一重引用符内で幅をパーセントで使用するだけです：

<select chosen width="'100%'" ... ></select>

このテクニックを使用して選択されたレスポンシブは次のとおりです。 http://plnkr.co/edit/RMAe8c?p=preview

0
Bernardo Ramos

私が使用する方法は、inherit_select_classを使用することです。

HTML

<select class="input-xxlarge" />

JS

jQuery("[data-chosen]").chosen({
  inherit_select_classes : true
});

CSS

.input-xxlarge {
  width:530px;
  max-width: 100%;
}
0
M Kaweepatt Churcharoen

ここに私がそれをした簡単な理由があります。

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