Controls overlapping in ASP view

Question

I currently have an asp form that uses jquery for two elements: an image upload and a datapicker. The code that implements the image upload is

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

With an input element <input type="file" id="wcpImage" name="wcpImage" />.

The code that implements the Datepicker using the JQueryUI DatePicker widget is

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

With an input element generated by <%= Html.TextBoxFor(m => Model.Business.Liability_Expiry_Date) %>

The datepicker pops up when users enter the text box for the expiry date. The issue I'm having is that the buttons for the image upload are appearing over the top of the datepicker.

Can I use CSS z-index to fix this and how?

Answer 1

The use of the CSS z-index is most likely the only way to hand these types of issues.

Answer 2

This might do it:

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

Answer 3

Turns out that it was because the buttons were flash objects being drawn with a wmode of Window, which means that z-index will have no effect as the button is rendered over the top of everything. Set the wmode to Transparent in the javascript and now it works.

Found the answer here.