jQuery mango redimensionable z-index

Question

Me di cuenta de que los mangos de tamaño variable de la jQuery UI están encima de todos los demás elementos de la página. Comprobé usando las herramientas de desarrollador de Chrome y vi que se les asigna automáticamente un índice z de 1001. ¿Hay alguna forma de desactivar esto y darles el mismo índice z que el elemento de tamaño variable? Gracias.

Answer 1

El z-index se establece con CSS, no JavaScript. Tendrá que editar el CSS responsable, en este caso:

.ui-resizable-handle { 
    position: absolute; 
    font-size: 0.1px; 
    z-index: 99999; 
    display: block; 
} 

O bien, defina su propia regla para anular el comportamiento. Consulte esta página para obtener más información: http://www.mail-archive.com/jquery-ui@googlegroups.com/msg09524.html

Answer 2

Funciona mejor para mí, porque sin !important la regla se sobrescribe.

.ui-resizable-handle { z-index: auto !important; } 

Answer 3

Para nosotros esto era la manera hacky más conveniente y menos para anular la configuración predeterminada de los objetos jQuery-UI. Puede reemplazar el componente "redimensionable" con cualquiera de sus componentes. Solo asegúrese de que esto se ejecute después de que se cargue jQuery pero antes de su llamada $ (elemento) .resziable().

$ .extend ($. Ui.resizable.prototype.options, { zIndex: 2147483647 });

Answer 4

en lugar de tener que poner! Reglas de z-index importantes en su CSS, simplemente puede eliminar esta opción del prototipo de tamaño variable, y luego todos los identificadores obtendrán el índice z que define en su CSS. por lo general, ni siquiera tiene que definir uno.

// delete the zIndex property from resizable's options 
// only have to do this once, before instantiating any resizables 

delete $.ui.resizable.prototype.options.zIndex;