Выбранная ширина урожая увеличилась динамически

Ответ 1

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

Во-первых, вы должны добавить этот стиль в свой css:

#form_paciente{
    width: 100% !important;
}

Где * # form_paciente * - ваш идентификатор выбора.

После этого добавьте этот script в свой вид:

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 *

Что все!

Ответ 2

Этот блог рекомендует следующее:

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

Ответ 3

этот работал для меня, даже с несколькими полями выбора на экране:

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

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

Ответ 4

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

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

Таким образом, ваш выбранный виджет будет всегда на 100%, и соответственно измените размер. Если вам понадобится какая-то другая ширина, измените процент или инкапсулируйте сам выбор с помощью другого элемента и вместо этого установите ширину этого элемента.

Ответ 5

У меня была отзывчивая форма, в которой было много правил CSS с медиа-запросами, !important и т.д., и он использовал выбранный вариант с наследованием класса. При изменении размера часто возникали конфликты между выбранным и родительским css, и все могло бы сломаться. Я придумал простое решение, которое сработало для меня: воссоздайте выбранный dom при каждом изменении размера окна:

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


function doResize() {
     // Parent website 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
               });
}

Ответ 6

Основываясь на ответе @MSánchez, я написал следующее более общее, не обращаясь к каким-либо идентификаторам:

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 "selected-select-responsive", который выглядит следующим образом:

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

Опять же, это только наращивание ответов MSánchez! Thnx

Ответ 7

Просто используйте ширину в процентах в одинарных кавычках:

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

Отзывчивый, выбранный с использованием этой техники, можно увидеть здесь: http://plnkr.co/edit/RMAe8c?p=preview

Ответ 8

Вот простой, почему я это сделал.

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

Ответ 9

Способ, которым я пользуюсь, заключается в том, чтобы использовать attribute_select_class.

HTML

<select class="input-xxlarge" />

JS

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

CSS

.input-xxlarge {
  width:530px;
  max-width: 100%;
}

Ответ 10

Для меня это действительно так:

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_chosen создается следующим образом:

- выпадающий идентификатор append _chosen