Pourquoi mon agendaExtender se chevauche-t-il lorsqu'il est rendu?

Question

Je travaille sur une application Web .NET et j'utilise un contrôle CalendarExtender pour que l'utilisateur spécifie une date. Pour une raison quelconque, lorsque je clique sur l'icône pour afficher le calendrier, l'arrière-plan semble être transparent.

J'utilise l'extension sur d'autres pages et ne fonctionne pas dans cette question. Je ne suis pas sûr si cela vaut la peine de mentionner, mais le calendrier est imbriqué dans un panneau qui a un prolongateur de coin arrondi attaché, ainsi que le panneau ci-dessous (où le "De" se chevauchent).

Dans ce panneau, j'ai une configuration de mise en page de div pour créer deux colonnes.

EDIT: L'autre chose à noter ici est que la section qui porte le nom et « espaces réservés » pour surnom sont tous les contrôles d'étiquettes ASP.NET, si cela importe.

Answer 1

donc un peu plus farfouillé et je compris la question. Une partie du problème provient du fait que la disposition div que j'ai configurée pour créer deux colonnes séparées utilise les attributs position: relative et float: droite/gauche. D'après ce que j'ai lu, dès que vous commencez à augmenter l'attribut de position d'une balise div, cela affecte l'index z du rendu, ce qui ne fait que se compliquer lorsque le contrôle du calendrier "surgit" dynamiquement.

Malheureusement, il n'y a pas d'attribut Z-Index pour le CalendarExtender, sauf si vous voulez écrire un style entier pour le calendrier, ce que je ne veux pas faire. Cependant, vous pouvez étendre le style par défaut en ajoutant ce qui suit à votre fichier CSS:

.ajax__calendar_container { z-index : 1000 ; } 

Si vous n'utilisez un fichier CSS, vous pouvez également ajouter ceci dans la section de la tête de votre page:

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

et qui devrait faire l'affaire. Cela a fonctionné pour moi. Si, pour une raison quelconque, cela ne fonctionne pas (et que certaines personnes signalaient encore des problèmes), une approche un peu plus "agressive" consistait à envelopper les champs de saisie et CalendarExtender dans un tag DIV, puis ajouter ce qui suit à votre CSS file/HEAD section:

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

... et j'espère que cela fonctionnera pour vous.

Answer 2

qui ne semble pas transparent pour moi, on dirait qu'il est rendu « derrière » les autres éléments. Avez-vous un "index-z" spécifié pour les éléments?

Answer 3

J'ai eu un problème similaire que je fixe avec indice z sur fieldsets

Si vous avez

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

alors la fenêtre contextuelle ajax apparaît sous le deuxième groupe d'options, pour fixer définir le z-index le premier fieldset doit être supérieur à celui du second, c'est-à-dire comme ci-dessous.

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

Answer 4

Le ne manière que j'ai trouvé pour résoudre le problème dans IE7 était d'ajouter un peu de CSS supplémentaire à la page que je rencontrais des problèmes avec.Aucune quantité de z-indexing ou div emballage et re-style n'avait un effet.

Ce qui suit modifie le contexte d'empilage des contrôles. Le résultat est que la fenêtre contextuelle apparaît verticalement au-dessus du contrôle d'extension au lieu de verticalement en dessous comme d'habitude. Pour moi, c'était acceptable.

Answer 5

La seule façon que j'ai trouvée pour résoudre ce problème était d'écrire quelques règles de CSS pour l'agendaExtender. Cela a fonctionné pour moi. Le code est ci-dessous:

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

Answer 6

Si ces réponses ne fonctionne pas correctement, il est peut-être un problème avec trop-plein cacher. Cela peut être résolu en utilisant css suivant:

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