Contrôles chevauchant dans la vue ASP

Question

J'ai actuellement une forme d'asp qui utilise jquery pour deux éléments: un téléchargement d'image et un datapicker. Le code qui implémente le téléchargement d'image est

$(function() { 
    $("#wcpImage").makeAsyncUploader({ 
     upload_url: "/Business/ImageUpload", 
     flash_url: '../../Scripts/swfupload.swf', 
     button_image_url: '../../Content/images/blankButton.png', 
     disableDuringUpload: 'INPUT[type="submit"]' 
    }); 
}); 

Avec un élément d'entrée <input type="file" id="wcpImage" name="wcpImage" />.

Le code qui implémente le Datepicker en utilisant le widget jQueryUI DatePicker est

$().ready(function() { 
    $('#Business_Work_Cover_Expiry_Date').datepicker({ dateFormat: 'dd/mm/yy' }); 
}); 

Avec un élément d'entrée généré par <%= Html.TextBoxFor(m => Model.Business.Liability_Expiry_Date) %>

DatePicker apparaît lorsque les utilisateurs entrent dans la zone de texte pour la date d'expiration. Le problème que j'ai est que les boutons pour le téléchargement de l'image apparaissent au-dessus de la datepicker. Puis-je utiliser CSS z-index pour résoudre ce problème et comment?

Answer 1

s'avère que c'était parce que les boutons étaient des objets flash en cours d'élaboration avec un wmode de fenêtre, ce qui signifie que z-index n'a aucun effet que le bouton est rendu au dessus de tout. Définissez le wmode sur Transparent dans le javascript et maintenant cela fonctionne.

Found the answer here.

Answer 2

L'utilisation de l'index z CSS est probablement le seul moyen de résoudre ce type de problème.

Answer 3

Cela pourrait le faire:

<style type="text/css"> 
    #ui-datepicker-div { 
     z-index: 9999999; 
    } 
</style>