jquery - microsoft - visual studio installer

Problema de autocompletar en arranque modal

Question

Tengo un problema de visualización en el autocompletado jQuery dentro de un arranque de diálogo modal.

Cuando muevo el mouse, los resultados no permanecen adjuntos a la entrada.

¿Hay una manera de resolver esto?

Aquí JsFiddle :

.ui-autocomplete-input {
  border: none; 
  font-size: 14px;
  width: 300px;
  height: 24px;
  margin-bottom: 5px;
  padding-top: 2px;
  border: 1px solid #DDD !important;
  padding-top: 0px !important;
  z-index: 1511;
  position: relative;
}

EDITAR Encontré el problema:

.ui-autocomplete {
  position: fixed;
  .....
}

Si el modal tiene desplazamiento, ¡el problema persiste!

Aquí JsFiddle/1 .

Answer 1

Agregar la opción appendTo resolvió este problema. Agregó el menú a uno de los objetos en el modelo de arranque.

Answer 2

Con agrega la clase "ui-front" al elemento padre div y la autocompletar se mostrará correctamente dentro de PopUp For Me.

Answer 3

El problema real es que el Modal Bootstrap tiene un índice Z más alto que cualquier otro elemento en la página. Por lo tanto, el autocompletado realmente funciona, pero se oculta detrás del diálogo.

Solo necesita agregar esto en cualquiera de sus archivos css agregados:

.ui-autocomplete {
  z-index:2147483647;
}

Answer 4

La posición correcta es que es "absoluta", mientras que debe especificar esto como una opción para autocomplete :

$( ".addresspicker" ).autocomplete( "option", "appendTo", ".eventInsForm" );

Donde puede anclar la caja con los resultados en cualquier elemento, ¡tengo que evitar que se ancle a la clase del formulario!

¡Aquí hay un JsFiddle de trabajo! .

Answer 5

La solución anterior que habla sobre el problema del z-index funcionó:

.ui-autocomplete { z-index:2147483647; }

Asegúrese de ponerlo antes de su script .js responsable del manejo de la lógica modal AND autocomplete.

Answer 6

Lo resolví con esto ...

/********************************************************************
*           CORREZIONE PER L''AUTOCOMPLETE EXTENDER di AJAX TOOLKIt  *
********************************************************************/
ul[id*=''_completionListElem''] {
    z-index: 215000000 !important;
}

La lista de finalización del extensor de autocompletar tiene una ID con identificador como este id = '' _completionListElem ''

así que debes subir el índice z ... superior al panel modal de arranque;)

Espero eso ayude

Answer 7

Para arreglar esto solo necesitaba modificar en el archivo css por jQuery:

.ui-front {
    z-index: 9999;
}

Answer 8

Solo trata de agregar esto:

.ui-autocomplete {
  z-index: 215000000 !important;
}

Solo asegúrese de darle un alto valor a la propiedad y HAGA AGREGAR

!importante

Realmente importa Este último le dirá a su navegador que ejecute esta regla primero, antes que cualquier otra de la misma clase. Espero que ayude

Answer 9

autocomplete :

Cuando el valor es nulo, los padres del campo de entrada serán verificados para una clase de ui-front. Si se encuentra un elemento con la clase ui-front, el menú se agregará a ese elemento.

Así que simplemente agregue la clase "ui-front" al elemento principal y la autocompletar se mostrará correctamente dentro del modal.

Answer 10

.ui-front {
    z-index: 9999;
}

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog ui-front">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">

            </div>
        </div>
    </div>
</div>