¿Por qué se superpone mi CalendarExtender cuando se procesa?

Question

Estoy trabajando en una aplicación web .NET y estoy usando un control CalendarExtender para que el usuario especifique una fecha. Por alguna razón, cuando hago clic en el ícono para mostrar el calendario, el fondo parece transparente.

Estoy usando el extensor en otras páginas y no me meto en este problema.

No estoy seguro de si vale la pena mencionarlo, pero el calendario está anidado dentro de un panel que tiene un extensor de esquina redondeado adjunto, así como el panel debajo de él (donde el "De" se superpone).

Dentro de ese panel, tengo una configuración de diseño div para crear dos columnas.

EDITAR: La otra cosa a tener en cuenta aquí es que la sección que tiene el nombre y "marcadores de posición" para el apodo son todos los controles de etiqueta ASP.NET, si eso es lo que importa.

Answer 1

Así que poking algo más y descubrí el problema. Parte del problema surge del hecho de que el diseño div que configuré para crear dos columnas separadas usa la posición: relativo y flotante: atributos derecho/izquierdo.

Por lo que he leído, tan pronto como comienzas a aumentar el atributo de posición de una etiqueta div, afecta el índice z de la representación, que solo se complica cuando el control de calendario está "apareciendo" dinámicamente.

Lamentablemente no hay ningún atributo Z-Index para CalendarExtender, a menos que desee escribir un estilo completo para el calendario, lo que no quiero hacer. Sin embargo, se puede ampliar el estilo por defecto añadiendo lo siguiente a su archivo CSS:

.ajax__calendar_container { z-index : 1000 ; } 

Si no está utilizando un archivo CSS, también puede agregar esto en la sección de cabecera de su página:

<style type="text/css"> 
    .ajax__calendar_container { z-index : 1000 ; } 
</style> 

y eso debería hacer el truco. Funcionó para mí

Si por alguna razón esto no funciona (y algunas personas todavía informan problemas), un enfoque un poco más "agresivo" fue envolver los campos de entrada y CalendarExtender en una etiqueta DIV y luego agregar lo siguiente a su CSS archivo/HEAD sección:

.ajax__calendar { 
    position: relative; 
    left: 0px !important; 
    top: 0px !important; 
    visibility: visible; display: block; 
} 
.ajax__calendar iframe 
{ 
    left: 0px !important; 
    top: 0px !important; 
} 

... y con suerte eso funcionará para usted.

Answer 2

Eso no me parece transparente, parece que se está "retrasando" a los otros elementos. ¿Tiene un "índice Z" especificado para cualquier artículo?

Answer 3

Tuve un problema similar que me fijo con el índice z en fieldsets

Si usted tiene

<fieldset> some content... including ajax popup </fieldset> 
<fieldset> some more content </fieldset> 

entonces el emergente ajax aparece debajo del segundo grupo de campos, para fijar establece el índice z de el primer fieldset es más alto que el del segundo, es decir, como se muestra a continuación.

<fieldset style="z-index: 2;"> some content... including ajax popup </fieldset> 
<fieldset style="z-index: 1;"> some more content </fieldset> 

Answer 4

La forma única que he encontrado para resolver el problema en Internet Explorer 7 fue la de añadir un poco de CSS extra a la página que estaba teniendo problemas con.Ninguna cantidad de z-indexing o div wrapping y re-styling estaba teniendo un efecto.

Lo siguiente cambia el contexto de apilamiento de controles.

.ajax__calendar_container 
{ 
    position:static; 
} 

Esto hace que el calendario emergente aparezca verticalmente por encima del control del extensor en lugar de verticalmente por debajo de lo normal. Para mí eso fue aceptable.

Answer 5

La única forma que encontré para resolver este problema fue escribir algunas reglas CSS para calendarExtender. Funcionó para mí El código es el siguiente:

https://gist.github.com/carlosmr12/5825371

Answer 6

Si esas respuestas no funciona correctamente, podría ser un problema escondido desbordamiento. Esto se puede resolver usando el siguiente código css:

.ajax__scroll_none { 
    overflow: visible !important; 
    z-index: 10000 !important; 
}