IE Display Issue

[Dan Ehrmann]

Had a few reports from customers that the upload control was not properly displayed. Only a small box was displayed on the screen - no browse button, and nothing happened when clicking.

I was able to reproduce the problem in IE8 compatibility mode (presumably, this would also happen in IE7 and in IE9  compatibility mode).

The span wrapper around the file input box was set to overflow:hidden, which chopped off the control display, leaving just a little bit peeking out.

I added the following to my page to fix the problem:

<style type="text/css">
.RadUpload .ruFileWrap {
    overflow:visible !important;
}
</style>

 

Since the overflow style in the telerik upload.css file is "!important", I could not find a way to fix the overflow globally - I need to add the above style to every page where the control is used. Is there a better way to do this?

[Bozhidar]

Hi Dan,

Actually the problem is that due to a browser bug, a style="width: 80px" is added to the span wrapper, which chops off the contents. To overcome this, you could add the following css:

.ruFileWrap
{
    width:400px !important;
}

Of course you can choose a number that best suits your design.

Another approach is to remove this style using javascript. Here's the line that does that:

var upload = $find("<%= RadUpload1.ClientID %>");
$telerik.$(".ruFileWrap", upload.get_element()).get(0).style.width = "";

 
Regards,
Bozhidar
the Telerik team

[MBEN]

That does solve the issue.

Thanks for the help.