Archives du blog

CFWindow + DatePicker + IE …

Salut,
Je viens de tomber sur un petit problème et comme d’habitude je partage mon problème ainsi que la solution que j’ai trouvé.

L’origine de mon problème est la suivante:
Je créé une fenêtre avec cfwindow et à l’intérieur de celle-ci ce trouve plusieurs control dont certains
doivent recevoir

setTimeout(function(){
$(« #startDate »).datepicker({ dateFormat: « yy-mm-dd » });
},500);

On peut voir ici que pour aciver le datepicker j’ai du faire appel à la fonction javascript: setTimeout. la raison est simple l’appel à cette page via CFWindow est un appel ajax donc asynchrone, et pour être sur que le control soit bien de type datepicker.

Si je laisse comme ça le calendrier apparaitra derrière le fenêtre CFWindow donc j’ai ajouté ceci avant l’HTML

<style>
div.ui-datepicker {
z-index: 9999 !important;
}
</style>

Houra!!!!! Ca fonctionne avec Firefox mais pas avec IE (je ne le considère pas comme un browser).

Que faire …

He bien grace au site css-tricks j’ai trouvé la solution.

il faut ajouter ce code dans le setTimeout après la création du datepicker.
$(function() {
var zIndexNumber = 1000;
// Put your target element(s) in the selector below!
$(« div »).each(function() {
$(this).css(‘zIndex’, zIndexNumber);
zIndexNumber += 1;
});

La version du code complet avec le style et le JQuery qui va avec

<style>
div.ui-datepicker {
z-index: 9999 !important;
}
</style>

setTimeout(function(){
$(« #startDate »).datepicker({ dateFormat: « yy-mm-dd » });
$(function() {
var zIndexNumber = 1000;
// Put your target element(s) in the selector below!
$(« div »).each(function() {
$(this).css(‘zIndex’, zIndexNumber);
zIndexNumber += 1;
});
},500);

Référence
http://css-tricks.com/snippets/jquery/fixing-ie-z-index/ il propose des solutions sur les CSS.

Publicités
%d blogueurs aiment cette page :