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.