Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Adam Spiker
262
Firefox does not render Upload Control in modal Dialog box
posted

i have a dialog box that contains the igUpload Control. In IE and Chrome, everything works fine. However in Firefox, when the dialog popups, the control displays, but if you click the upload button to add files, nothing happens.

i did some research and found that there is already a similar problem with using the <INPUT type=file> control inside a modal dialog in firefox as well. the fix for this was to remove the "overflow:hidden" style in the jquery.css (UI-Dialog class). i made this change in the jquery.ui.custom.css and it fixed the problem for the <INPUT> control, but it did not fix the problem for the igUpload. 

Currently, our firefox users can not upload files. 

 

below is an example of what we're doing:

  <script type="text/javascript">
 function pageLoad() {
        $("#dvUploadFile").hide();

            $("#dvUploadFile").dialog({

                show: 'fade',

                hide: 'fade',

                modal: true,

                resizable: false,

                draggable: false,

                width: 750,

                height: 'auto',

                autoOpen: false,

                close: function (ev, ui) {}

            });

}</script>

 

<div id="dvUploadFile" title="Upload File">

<ig:WebUpload ID="WebUpload1" runat="server" Width="100%" AutoStartUpload="true"     OnUploadStarting="WebUpload1_UploadStarting1" OnUploadFinishing="WebUpload1_UploadFinishing">   <ClientEvents OnError="onError" FileSelected="fileSelected" CancelAllClicked="cancelAllClicked"               FileUploadAborted="fileUploadAborted" FileUploaded="fileUploaded" FileUploading="fileUploading" /></ig:WebUpload> 

</div>

 

  • 1800
    Verified Answer
    posted

    Hi Adam,

    Indeed the problem is replicated ONLY when control is nested inside dialog box and ONLY in Firefox. So I have solution. You should change z-index property of the input type-file to 999999. I have tested and it works properly. So for now we can propose you some workarounds to fix this issue and later for next Service Relase we will include this fix.

    So first solution is just to replace in javascript source code for file ig.ui.upload.js

    'zIndex'

     

     

    : '2147483583', to be 'zIndex': '999999',

    Another solution is if your fileupload control is with id myControl then

    to add this in your aspx page this:

     

    <

     

     

    style>

     

     

    #myControl_ibb_fp

     

     

    , #myControl_bb_fp

    {

     

     

     

    z-index: 999999 !important;

    }

    </

     

     

    style>

     

    These client IDs of input type="file" DOM elements. You can chose the solution you prefer. As I said we have fixed this and will be available for the next SR.