jquery - buscador - select2 size

Select2 no funciona cuando está incrustado en un modo bootstrap

Question

Cuando uso un select2 (entrada) en el modo bootstrap, no puedo escribir nada en él. Es como discapacitado? Fuera de él, modal select2 funciona bien.

ejemplo de trabajo: http://jsfiddle.net/byJy8/1/ código:

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">
<form class="form-horizontal">
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="vdn_number">Numer</label>
<div class="controls">
<!-- seleect2 -->
<input name="vdn_number" type="hidden" id="vdn_number" class="input-large" required="" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>

ad js

$("#vdn_number").select2({
placeholder: "00000",
minimumInputLength: 2,
ajax: {
url: "getAjaxData/",
dataType: ''json'',
type: "POST",
data: function (term, page) {
return {
q: term, // search term
col: ''vdn''
};
},
results: function (data) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
return {results: data};
}
}
});

respuestas:

Aquí puedes encontrar una fix rápida

y aquí está ''la manera correcta'': Select2 no funciona cuando está incrustado en un modo de rutina de carga

Answer 1

Basado en la respuesta de @pymarco, escribí esta solución, no es perfecta pero resuelve el problema de enfoque select2 y mantiene la secuencia de pestañas trabajando dentro de la modalidad

 $.fn.modal.Constructor.prototype.enforceFocus = function () {
$(document)
.off(''focusin.bs.modal'') // guard against infinite focus loop
.on(''focusin.bs.modal'', $.proxy(function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length && !$(e.target).closest(''.select2-dropdown'').length) {
this.$element.trigger(''focus'')
}
}, this))
}

Answer 2

Encontré una solución a esto en github para select2

https://github.com/ivaynberg/select2/issues/1436

Para bootstrap 3, la solución es:

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Bootstrap 4 cambió el nombre del método enforceFocus a _enforceFocus , por lo que deberá parchear eso:

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

Explicación copiada del enlace de arriba:

Bootstrap registra a un oyente en el evento focusin que verifica si el elemento enfocado es la superposición en sí o un descendiente de él; si no, simplemente se vuelve a enfocar en la superposición. Con el menú desplegable select2 adjunto al cuerpo, esto efectivamente le impide ingresar cualquier cosa en el campo de texto.

Puede arreglar esto rápidamente sobrescribiendo la función enforceFocus que registra el evento en el modal

Answer 3

Está bien, sé que llego tarde a la fiesta. Pero déjame compartir contigo lo que funcionó para mí. Las soluciones tabindex y z-index no funcionaron para mí.

La configuración del elemento primario del elemento seleccionado funcionó según los problemas comunes enumerados en el sitio select2.

Answer 4

Este problema Sloved Working For Me función Jquery individual

<div id="changeTransportUserRequestPopup" class="modal fade" role="dialog">
<div class="modal-dialog" style="width: 40%!important; ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h3>Warning</h3>
</div>
<div class="modal-body" id="changeTransportUserRequestPopupBody">
<select id="cbTransport" class="js-example-basic-single" name="cbTransport" style="width:100%!important;"></select>
</div>
<div class="modal-footer">
<button id="noPost" class="btn btn-default" name="postConfirm" value="false" data-dismiss="modal">Cancel</button>
<button type="submit" id="yesChangeTransportPost" class="btn btn-success" name="yesChangeTransportPost" value="true" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>

Answer 5

La respuesta que funcionó para mí se encuentra aquí: https://github.com/select2/select2-bootstrap-theme/issues/41

$(''select'').select2({
dropdownParent: $(''#my_amazing_modal'')
});

Tampoco requiere la eliminación de la tabindex .

Answer 6

Ok, lo tengo para trabajar.

cambio

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">

a

<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">

(quite tabindex = "- 1" de modal)

Answer 7

Si tiene un problema con el teclado del iPad que oculta el modo de arranque al hacer clic en la entrada select2 , puede resolver esto agregando la siguiente regla después de la inicialización de la entrada select2 :

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
var styleEl = document.createElement(''style''), styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
document.body.scrollTop = 0; // Only for Safari
}

Tomado de https://github.com/angular-ui/bootstrap/issues/1812#issuecomment-135119475

EDITAR: Si sus opciones no se muestran correctamente, necesita usar el atributo dropdownParent al inicializar select2 :

$(".select2").select2({
dropdownParent: $("#YOURMODALID")
});

Buena suerte (:

Answer 8

Si usa la ventana emergente jquery mobile, debe reescribir la función _handleDocumentFocusIn:

$.mobile.popup.prototype._handleDocumentFocusIn = function(e) {
if ($(e.target).closest(''.select2-dropdown'').length) return true;
}

Answer 9

Simplemente elimine tabindex="-1" y agregue overflow:hidden estilo overflow:hidden

Aquí hay un ejemplo:

<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;">
<!---content modal here -->
</div>

Answer 10

Simplemente lo hago funcionar incluyendo select2.min.css

Prueba fuera

Mi html modal de bootstrap 3 es

$(''#myModal .select2'').each(function() {
var $p = $(this).parent();
$(this).select2({
dropdownParent: $p
});
});

Answer 11

Solo para comprender mejor cómo funcionan los elementos de tabindex para completar la respuesta aceptada:

El atributo global de tabindex es un entero que indica si el elemento puede tener enfoque de entrada (es enfocable), si debería participar en la navegación secuencial del teclado, y si es así, en qué posición. Puede tomar varios valores:
-un valor negativo significa que el elemento debe ser enfocable, pero no debe ser accesible a través de la navegación secuencial del teclado;
-0 significa que el elemento debe ser enfocable y accesible a través de la navegación secuencial del teclado, pero su orden relativo está definido por la convención de la plataforma;
-un valor positivo significa que se puede enfocar y alcanzar mediante la navegación secuencial del teclado; su orden relativo está definido por el valor del atributo: la secuencia sigue el número creciente de tabindex. Si varios elementos comparten la misma tabla de índice, su orden relativo sigue su posición relativa en el documento.

de: Mozilla Devlopper Network

Answer 12

Solo uso este código en Document.read ()

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

Answer 13

Solucioné esto generalmente en mi proyecto sobrecargando la select2 select2. Ahora verificará si no hay DropdownParent y si se llama a la función en un elemento que tiene un padre del tipo div.modal . Si es así, agregará ese modal como padre para el menú desplegable.

De esta manera, no tiene que especificarlo cada vez que cree un cuadro de entrada-selección2.

(function(){
var oldSelect2 = jQuery.fn.select2;
jQuery.fn.select2 = function() {
if (arguments.length === 1 && typeof arguments[0] === ''object'' && typeof arguments[0].dropdownParent !== ''defined'') {
const modalParent = jQuery(this).parents(''div.modal'').first();
if (modalParent.length > 0) {
arguments[0].dropdownParent = modalParent;
}
}
return oldSelect2.apply(this,arguments);
};
})();

Answer 14

Tengo el mismo problema con el select2 en bootstrap modal , y la solución fue eliminar el overflow-y: auto; y overflow: hidden ; de .modal-open y .modal classes

Este es el ejemplo del uso de jQuery para eliminar el overflow-y :

$(''.modal'').css(''overflow-y'',''visible'');
$(''.modal'').css(''overflow'',''visible'');

Answer 15

Tuve el mismo problema, actualizar z-index para .select2-container debería hacer el truco. Asegúrese de que el z-index su modal sea más bajo que el de select2.

.select2-container {
z-index: 99999;
}

Actualizado: en caso de que el código anterior no funcione correctamente, también elimine los índices de tabulación de su modal como se sugiere en @breq

Answer 16

Tuve este problema antes, estoy usando yii2 y lo resolví de esta manera

$.fn.modal.Constructor.prototype.enforceFocus = $.noop;

Answer 17

cambiar el archivo select2.css

z-index: 9998;
...
z-index: 9999;
...
z-index: 10000;

a

z-index: 10000;
...
z-index: 10001;
...
z-index: 10002;

Answer 18

Para Select2 v4:

Use dropdownParent para adjuntar el menú desplegable al diálogo modal, en lugar del cuerpo HTML.

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<select id="select2insidemodal" multiple="multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#select2insidemodal").select2({
dropdownParent: $("#myModal")
});
});
</script>

Esto adjuntará el menú desplegable Select2 para que quede dentro del DOM del modal en lugar de al cuerpo HTML (el valor predeterminado). Ver https://select2.org/dropdown#dropdown-placement

Answer 19

$("#IlceId").select2({
allowClear: true,
multiple: false,
dropdownParent: $("#IlceId").parent(),
escapeMarkup: function (m) {
return m;
},
});

Este código está funcionando. Gracias.

Answer 20

.select2-close-mask{
z-index: 2099;
}
.select2-dropdown{
z-index: 3051;
}

Esta es mi solución con select2 4.0.0. Simplemente anule el css justo debajo de la importación select2.css. Asegúrese de que el índice z sea mayor que su diálogo o modal. Acabo de añadir 2000 en los predeterminados. Porque el índice z de mis diálogos son alrededor de 1000.