jquery - multiple - chosen:updated

Elegido harvesthq redimensiona el ancho dinámicamente

Question

¿Cómo se puede tener un menú desplegable de harvesthq Elegido con un estilo de ancho dinámico?

Por defecto tiene un ancho fijo y si intentas modificarlo con CSS tendrás varios problemas para alcanzar un buen resultado.

Answer 1

este funcionó para mí, incluso con múltiples cuadros de selección en la pantalla:

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

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

Answer 2

Simplemente use ancho en porcentaje dentro de comillas simples:

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

Se puede ver una respuesta elegida utilizando esta técnica aquí: http://plnkr.co/edit/RMAe8c?p=preview

Answer 3

Solo quiero compartir mi solución sobre cómo cambiar el tamaño del ancho desplegable elegido en el tamaño de la pantalla:

En primer lugar, debes agregar este estilo en tu CSS:

#form_paciente{
    width: 100% !important;
}

Donde * # form_paciente * es su ID de selección.

Después de eso, agregue este script en su vista:

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

En ese caso * # selecciona_paciente_estadisticas_form * es el ID principal del formulario de * # form_paciente *

¡Eso es todo!

Answer 4

Tenía una forma receptiva, que tenía muchas reglas de CSS con consultas de medios, !important , etc. y usaba la opción elegida con herencia de clase. Al cambiar el tamaño, a menudo había conflictos entre los css elegidos y los padres y las cosas se romperían. Se me ocurrió una solución simple que funcionó para mí: recrear el dom elegido en cada tamaño de ventana:

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

Answer 5

Para mí, lo que realmente funcionó fue esto:

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

y dentro document.ready

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

donde el menú desplegable es id del menú desplegable. También puede establecer la disminución de ancho en el evento de cambio. #dropdown_chosen se crea por elegido de la siguiente manera:

menú desplegable: su ID desplegable adjuntar _chosen

Answer 6

Sobre la base de la respuesta de @ MSánchez, escribí lo siguiente para ser más genérico sin referirme a ningún 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);

También agregue al elemento de selección "elegido-seleccionar-sensible" que es el siguiente:

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

De nuevo, ¡esto es solo una acumulación en la respuesta de MSánchez! thx

Answer 7

Aquí está el simple por qué lo hice.

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

Answer 8

Este blog recomienda lo siguiente:

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

Answer 9

Aunque mencionado en parte anteriormente, me gustaría señalar la siguiente solución:

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

De esta forma, el widget elegido siempre será 100% y cambiará el tamaño según corresponda. Si necesita que sea de otro ancho, cambie el porcentaje o encapsule la selección con otro elemento y establezca el ancho en ese elemento.