This is a migrated thread and some comments may be shown as answers.

IE8 rendering bug

7 Answers 144 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Wannes
Top achievements
Rank 1
Wannes asked on 11 Nov 2011, 12:34 PM
Hello everyone,

In IE8 (version: 8.0.7601.17514), the file input button is displayed in front of the "Select..." label, even though it clearly was styled to look transparent. From the CSS:
.k-upload-button input {
  ...
  filter:alpha(opacity=0);
  ...
}

As a work-around, the input button can be hidden and the click on the label can be forwarded to the file input button, like so:
$("#question-form-image-input").kendoUpload({
    // ...
});
 
// Fix for IE rendering bug:
if ($.browser.msie) {
    $("#question-form-image-input").hide().next("span").click(function () {
        $("#question-form-image-input").click();
    });
}

Please fix it if possible.

Best Regards,
Wannes.

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 11 Nov 2011, 01:06 PM
Hello Wannes,

I suggest you to read the following forum thread:

http://www.telerik.com/community/forums/aspnet-mvc/upload/upload-control---partially-visible.aspx

I noticed that the Kendo Upload still uses 500px font-size, so I reduced it to 200px.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Wannes
Top achievements
Rank 1
answered on 11 Nov 2011, 03:28 PM
I'm sorry, reducing the font-size doesn't fix the issue. It really is the apha filter that doesn't seem to work. I have attached a screenshot of what I am seeing. It's the same as on your KenoUI demo page.

On the Telerik demo page, it works perfectly, so I assume KendoUI beta2 doesn't yet contain that fix.

Best Regards,
Wannes.
0
Dimo
Telerik team
answered on 11 Nov 2011, 03:36 PM
Hello Wannes,

Are you sure you have changed (overridden) the font-size correctly? I inspected the MVC and Kendo Uploads and this is the only notable difference in terms of styling. Anyway, I have already changed the font-size on our side and it will take effect for the official Kendo release.

Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Wannes
Top achievements
Rank 1
answered on 11 Nov 2011, 05:28 PM
Hello Dimo,

You are right. There is almost no difference in the styling. What I tested next, was to skip the .kendoUpload() call and to just test the HTML itself. I tried putting a regular file input field inside your k-upload-button class:
<div class="k-button k-upload-button">
    <input type="file" name="someFile" style="filter: alpha(opacity=0) !important;" />
</div>
This reproduces the issue. However, when the <div> is removed, the input field is correctly transparent.

After some research, I found out that the DOCTYPE has an effect on alpha filters and also that IE8 requires the following CSS:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
Yet none of all this works. Since the Telerik example does work, it must be one of those obscure, unexplicable IE-specific bugs. I will retest this later for the next release. Maybe you can check the basic upload example from your website in IE8 for your latest development version, to see if there are any issues?

Best Regards,
Wannes.
0
Wannes
Top achievements
Rank 1
answered on 11 Nov 2011, 05:51 PM
Update:
Yep, it's a IE version-specific issue. IE 8.0.6001.18702 on Windows Server 2003 seems to work properly.
Might be a new IE bug, might be a comination of IE security settings, virus scanners and Windows 7...
0
Joel
Top achievements
Rank 1
answered on 11 Nov 2011, 10:09 PM
I have the same issue here.

IE version 8.0.7600.16385, on Windows 7
0
Wannes
Top achievements
Rank 1
answered on 16 Dec 2011, 12:43 PM
The official 1.0 release fixes the issues.
Well done!

Best Regards,
Wannes.
Tags
Upload
Asked by
Wannes
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Wannes
Top achievements
Rank 1
Joel
Top achievements
Rank 1
Share this question
or