Upload Control - Partially Visible

[sasho]

Is it just me or there is a messed up CSS tag somewhere because the select button is not completely  visible. Even on your demos website.

http://demos.telerik.com/aspnet-mvc/upload


I am using IE8. Chrome looks fine and Firefox. So weird.

Compatability mode turned on or OFF no change. Can someone see if they can reproduce this. Just drop a Upload control thats all I did.

[Atanas Korchev]

Hi sasho,

 I cannot reproduce this behavior. Find attached a screenshot showing how things look at my side.

Regards,
Atanas Korchev
the Telerik team

[Jennifer Hughes]

I'm seeing the same behavior in Internet Explorer as the OP, see attached. Slightly newer build of IE8 than Alex's

[Dimo]

Hi all,

I suspect that the issue is caused by the fact that the opacity filter in IE does not work. The filter style is responsible for making the <input type="file" /> element invisible while being positioned over the styled push button. This problem can occur if your browser security settings are too restrictive. Please check.

Kind regards,
Dimo
the Telerik team

[Jennifer Hughes]

I can't find any combination of browser security settings that works... did you find something specific?

I did do a search and did find that IE does have problems with the opacity filter.

I wouldn't really care... but the client is using IE on a terminal server in a locked down environment and getting them to change just for this... not an option.

[Atanas Korchev]

Hello Jennifer Hughes,

 Well the upload needs the transparency to work in order to be skinned properly. There is no way to do this without skinning.

Greetings,
Atanas Korchev
the Telerik team

[Sven]

I have the same issue as the TS.

Browser: IE 8
Version: 8.0.7600.16385

[Dimo]

Hi all,

The IE security setting, which is responsible for making the IE opacity filter work, is "Binary and script behaviors".

Regards,
Dimo
the Telerik team

[sasho]

I dont see any solution to the problem? Has any one find out something?

Where is this bianry and script setting? How do I change it?

[T. Tsonev]

Hi,

We've included detailed instructions in the troubleshooting section of the Upload. It is not published yet, so I'm pasting them here as well.

Problem: The "Select..." button is partially visible and has no text

The Upload uses an opacity filter to overlay the default file input's Select button. This filter is implemented as an ActiveX control in IE versions 8 and below. As such, it is subject to security settings and can be accidentally disabled.

Sample image of an affected component:

Suggested actions

• Set the following option to "Enable" in Internet Explorer: "Internet Options -> Security -> Internet (or Local intranet) -> Custom Level -> Binary and script behaviors"

Best Regards,
Tsvetomir Tsonev
the Telerik team

[Lena]

You can find the "Binary and script behaviors" setting on Tools -> Internet Options -> Security -> Cutom level. In my office we have two laptops with IE8 where enabling "Binary and script behaviors" fixes the problem with the invisible Upload-label.

However, we have at least two other computers where enabling "Binary and script behaviors" does _not_ fix the problem!? We have tried to find a common parameter for when the problem is fixed and not, but so far in vain.

Of the two working computers one runs WinXP and one runs Win7. For a while we thought the problem was connected to something with newer (Vista/Win7) Windows versions aero-GUI-settings (the working Win7 computer has a classic theme style), but we have not found any such setting which affect the problem.

As far as we understand there is a combination between the "Binary and script behaviors" setting and setting X which causes the problem. Any help on identifying setting X is gratefully received.

[Sven]

The solution given by Telerik Admin, doesn't work at mine PC, unfortunately !

[T. Tsonev]

Hi,

Are you experiencing the problem on the demo site or only in your application?

Please make sure that you're adjusting the security settings for the zone that your application is running in.

Best Regards,

Tsvetomir Tsonev
the Telerik team

[Lena]

Hi,

No, I have the same problem on both the Telerik demo http://demos.telerik.com/aspnet-mvc/upload and in my application. I'd be very grateful for a solution to this problem.

Best regards, Lena

[T. Tsonev]

Hello Lena,

We've tried all security options, but "Binary and script behaviors" seems to be the only one that matters. Is there any chance that an administrator-set policy is preventing you from overriding it? This might be the case if the computers are part of a domain.

Best regards,
Tsvetomir Tsonev
the Telerik team

[Lena]

Hello again!

No, sorry, I am already administrator on my computer and it is not part of a domain. Just to make sure I started Internet Explorer with the "Run as administrator" option and checked the security setting there, same thing though, "Binary and script behaviors" is still enabled, and the text is still invisible...

Best regards, Lena

[T. Tsonev]

Hello Lena,

We'll continue trying, but for the moment we're out of ideas. I've prepared a small isolated test that you can use for verification: jsfiddle

Does it produce any different results?

Best regards,
Tsvetomir Tsonev
the Telerik team

[Lena]

Hi,

Thanks for the test, we have tried it on two different computers, one that the Telerik upload demo works on, and mine which the demo does not work on, and on both computers we see the same thing (a blue box and a red box and purple where the boxes overlap). Does this help at all?

Best regards, Lena

[T. Tsonev]

Hi Lena,

Good, this shows that only the demo site is affected. It might be running in a different zone or in compatibility mode. Each zone has its own security settings and we might be adjusting the wrong one.

I'm sending you a reference screenshot with the debugging tools open (F12). Can you please send me a screenshot of the same setup at your side?

Kind regards,
Tsvetomir Tsonev
the Telerik team

[Lena]

Hi!

Here is a screenshot, hope it helps?

Best regards, Lena

[T. Tsonev]

Hello Lena,

Can you please include the status bar in the screenshot? In what security zone is the site running - Internet / Intranet / Trusted Sites, etc?

Kind regards,
Tsvetomir Tsonev
the Telerik team

[Lena]

Hello again!

I'd missed that part of the image, here is a new version with the status bar included.

By the way, I noticed that when posting this reply and uploading the included image there is another upload button, and here I do see the text. I include a screenshot of this button as well to show which one I mean. This button seems to be coded with radUpload.addFileInput();  Is this of any help?

All the best, Lena

[T. Tsonev]

Hi Lena,

I'm afraid we're out of ideas. Something is disabling the ActiveX opacity filter, but it's unclear what.

You can try downloading the extensions locally to see if changing the zone to Local Intranet helps. You can also experiment with the different document modes, browser modes and security settings to see if it helps.

Greetings,
Tsvetomir Tsonev
the Telerik team

[Lena]

OK, thank you for trying. If I find a solution I'll post it later.

Best regards, Lena

[Matthew]

I added the demos.telerik.com page to my trused sites and set the the zone for that to the lowest security level where Binary and script behaviors is set to Enable.  Loading the page with IE 8 doesn't render the button correctly.  Anyone have any further ideas to try?

[Ryan]

I'm not sure if this helps but I've noticed something strange. On the Telerik Upload demo page, if I have my page zoom at 40%, the button will display correctly. Any larger page zoom(45% and higher) and the button displays incorrectly. You can test this by setting your page zoom to 40% and refreshing the demo page. I'm using IE 8.0.7601.17514 32-bit version. Should be the latest version of 8 with all patches. Also, I'm running Windows 7 64-bit. I checked my security settings and Binary and script behaviors are enabled.

[Lena]

Exactly the same thing happens to me, I also see the text at 40% but not at any higher zoom levels. And I also use IE 8.0.7601.17514 32-bit version on Windows 7 64-bit, if that is of any help.

[T. Tsonev]

Hi,

Thank you for sharing, Ryan. We've tried adjusting the zoom levels, but no luck so far.

Such behavior might be caused by misbehaving add-on or an overly-aggressive anti-virus program. Can you please try disabling those and running IE from the "Internet Explorer (No Add-ons)" shortcut?

I've prepared an isolated jsFiddle sample that replicates the exact Upload markup & styles. Can you please test with it to see if it makes any difference? http://jsfiddle.net/rpHFt/2/

Best Regards,
Tsvetomir Tsonev
the Telerik team

[Ryan]

I was looking at the JSFIDDLE page you posted. I think the problem is in the:

.t-upload-button input
{
    font: 500px monospace !important;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    padding: 0;
    margin: 0;
    cursor: pointer;
    right: 0; top: 0;
    z-index: 1;
}

section, specifically the opacity attribute. I don't think IE is adjusting the opacity with:

filter: alpha(opacity=0);

If I set the opacity to 100 on Firefox, the box looks exactly like it does on IE. One way I got it to apply the opacity filter was to add a zoom attribute:

.t-upload-button input
{
    font: 500px monospace !important;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    zoom: 2;
    padding: 0;
    margin: 0;
    cursor: pointer;
    right: 0; top: 0;
    z-index: 1;
}

    I found that if you apply the zoom at 1.02 or so or greater, the opacity will be applied correctly. Anything less and it will display incorrectly. I don't understand enough about it to know why though. Hope that helps.

    Also, I was testing the demo on several computers here and all the ones I tried it on that was running Windows XP displayed the button correctly, but the Vista/Windows 7 computers I tried it on did not display the button correctly. They are all running IE 8 32-bit, but the Windows XP computers were running 8.0.6001.18702 while the Windows 7 computers were running 8.0.7601.17514 and the Vista computer was running 8.0.6001.19019. I tried running IE with no addons and still no luck with the button.

[T. Tsonev]

Hi Ryan,

Thank you very much for your time! This is definitely a new problem to us. I've updated your Telerik points as a token of gratitude for your involvement.

Lena, can you please confirm if the Select button appears correctly with the fix applied? http://jsfiddle.net/n3Qjm/1/

In the meantime we'll test the effect it might have in other browsers and we'll include the fix in the next Service Pack release.

All the best,
Tsvetomir Tsonev
the Telerik team

[Andreas Botsikas]

Although I can see the button now, it does nothing when you click it...

Tested on windows 7 (x64) ie v8.0.7600.16385

In order to make it work in ie, I had to add a click handler on the button div to simulate the input click event:
$('.t-button').click(function(){attachments.click();});

[Lena]

Hello again,

Yes, I can see the text on the Select button now. Great work Ryan!

Best regards, Lena

[T. Tsonev]

Hi,

I'm happy this is working for you, Lena. The report by Andreas makes as wary about including the fix in production. Please include the following stylesheet on the page for the moment:

.t-upload-button input
{
    zoom: 2 !important;
}

Andreas, can you please confirm if removing the zoom setting fixes the button? I've prepared a modified sample here. If this doesn't fix it then something is probably wrong with the jsFiddle sample.

Kind regards,
Tsvetomir Tsonev
the Telerik team

[Lena]

Hi,

In your previous jsfiddle example I didn't have time to check the button, I only saw the text and thought all was well and left it at that. Now I've pasted the lines into my css-file and I'm sorry to say that I have the same problem as Andreas, I can see the text now but not use the button.

I've also tested you latest jfiddle example, here the button works again but the text has become invisible again.

Good luck with finding the answer! /Lena

[T. Tsonev]

Hi Lena,

Maybe zoom: 2.0 is too much. Ryan discovered that zoom values of 1.02 or higher seem to do the trick. Please try with this value to see if it makes any difference.

Thank you for helping us with that problem.

All the best,
Tsvetomir Tsonev
the Telerik team

[Lena]

I've tried this in jsfiddle, at zoom 1.01 or less I cannot see the text but the button works, at zoom 1.02 or higher the text is visible but the button does not work...

/Lena

[Dimo]

Hi all,

We did some tests on our side and here is what we found out:

The real file input element, which should be hidden with the opacity CSS style, behaves rather unexpectedly when a larger zoom style is applied to it - apart from enlarging, the element also is clipped on the right side. This is why the styled button becomes visible - because there is nothing over it anymore.

So the problem returns to its original state, namely - why the opacity filter style does not work in IE in certain scenarios. Unfortunately, we are unable to reproduce this problem locally (given that the security settings are specified correctly, as discussed).

Assuming that the opacity filter works in the browser generally, which can be tested here...

http://jsfiddle.net/9r4xx/3/

(you should see red and blue semi-transparent swauqres, which overlap at one corner)

...you can try isolating the problem by making changes to the provided stripped version of the Upload component's HTML output and CSS styling:

http://jsfiddle.net/n3Qjm/

Let us know if you have any additional information, which will help us reproduce and investigate the problem.

Best wishes,
Dimo
the Telerik team

[Andreas Botsikas]

http://jsfiddle.net/CsyDv/1/ works perfectly!!!
Will this change make it in the service pack?
 Thank you for your time!

[Dimo]

Hello Andreas,

I don't see any difference between your test page:

http://jsfiddle.net/CsyDv/1/

and ours:

http://jsfiddle.net/n3Qjm/

Can you please specify what are the changes you have made?

Regards,
Dimo
the Telerik team

[Simon]

Not sure if it helps anyone else, but I think this IE7/8/9 upload button rendering problem is possibly down to a really subtle CSS error in common.min.js, specifically the properties for the class element:

.t-upload-button 
{
	width:86px;
	position:relative;
	direction:ltr;
	overflow:hidden!important;/*!important required by IE7*/;
}

Notice the trailing semi-colon after the direction: *!important required by IE7*/

;

The trailing semi-colon was/is causing CSS rendering issues in IE7/8 and 9 but not any other browser.

Additionally, running the CSS through a 2.1 spec validator causes the test to fail at this trailing semi-colon.

Removing the semi-colon from common.min.js at the specified line has gotten the upload button to display and work correctly, at least in our test and production environments,

without changing the zoom level etc.

Coming across a fix may have been purely coincidental, but one thing I do know is that Visual Studio's 2.1 CSS validator was whinging at the above line/semicolon.

Hope this helps someone out as this bug has been a real source of pain for us and our users! 

Best,

Henry

[Dimo]

Hello Simon,

Thank you for the provided information. I have updated your Telerik points for your contribution.

Normally, all CSS comments should be removed from the shipped CSS files, which are minified. The comment in question was the only one, which remained and it turned out that the exclamation mark inside was causing this. Also, the additional semi-colon was added by the minifying script.

We have fixed the issue on our side and now the minified CSS file does not contain the comment at all. Now we are eager to find out whether this resolves the problem for all affected customers. Strangely enough, we were never able to reproduce the problem.

All the best,
Dimo
the Telerik team

[Andreas Botsikas]

I am sorry for my delayed answear, both links work fine ( I just didn't notice the new urls).

[William Dunn]

I only get the partially visible select button in IE8 (8.0.7601.17514) on Windows 7 64-bit (Binary and script behaviors is enabled).

No problems in IE8 (8.0.7600.16385) on Windows 7 32-bit.

And no problems in IE 9 (9.0.8112.16421) on Windows 7 64-bit.
 

[Dimo]

Hello William,

Can you please check whether opacity works in general in IE8 8.0.7601.17514 ?

The already provided jsFiddle page will give information about this:

http://jsfiddle.net/9r4xx/3/

You should see two squares (red and blue) that overlap, with a mixed purple color at the overlapping portions.

Best wishes,
Dimo
the Telerik team

[William Dunn]

yes, I see the red and blue squares with the purple overlapping.

[Dimo]

Hi William,

OK, how about this jsFiddle sample - do you see the button correctly with a "Select" text inside? If yes, does the Upload dialog appear when you click on it?

http://jsfiddle.net/n3Qjm/

We do not have this particular version of IE8, so your cooperation in tracking down the problem will be highly appreciated.

Regards,
Dimo
the Telerik team

[William Dunn]

Good morning,

I cannot see the "Select" text inside the button. The button opens up the dialog properly. I'm attaching a screen print.

[Dimo]

Hi William,

This means that the opacity style in the CSS code is not applied:

.t-upload-button input
{
    font: 500px monospace !important;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    padding: 0;
    margin: 0;
    cursor: pointer;
    right: 0; top: 0;
    z-index: 1;
}


Try replacing the above with...

.t-upload-button input
{
   font: 500px monospace !important;
   opacity: 0;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
   zoom:1;
   position: absolute;
   padding: 0;
   margin: 0;
   cursor: pointer;
   right: 0; top: 0;
   z-index: 1;
}


... and click on "Run" in the top toolbar.

Best wishes,
Dimo
the Telerik team

[William Dunn]

No change.  However, a zoom of 1.1 makes the button appear fine but the dialog will not come up when the button is clicked.

[Dimo]

Hi William,

A zoom style larger than 1 simply moves the invisible (in your case visible) <input type="file" /> outside the component boundaries, that's why this is not a solution.

In order to check the assumption whether your browser refuses to display invisible file input elements, please try this:

http://jsfiddle.net/VwP5f/


Dimo
the Telerik team

[William Dunn]

I've attached what I see.

I'm not too concerned, most of the users would not be on 64-bit with IE8 and those that are have probably moved on to IE9.

Thanks,

[Dimo]

Hello William,

Thank you for the screenshot. Now I suggest you to try this: start removing the styles from the CSS code one by one and click on "Run" at the top toolbar after each removal. Only leave the zoom and filter styles to remain applied. The purpose is to see whether there is some other CSS style, which prevents the opacity from working.

input
{
    font: 500px monospace !important;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    padding: 0;
    margin: 0;
    cursor: pointer;
    right: 0; top: 0;
    z-index: 1;
}

I am looking forward to your reply.

Greetings,
Dimo
the Telerik team

[William Dunn]

What you suggested lead me to start fiddling with the font style

This works:

.t-upload-button input
{
    font: 220px monospace !important;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    padding: 0;
    margin: 0;
    cursor: pointer;
    right: 0; top: 0;
    z-index: 1;
}

Anything above 220px will lose the text

[Dimo]

Hi William,

Thank you very much for your cooperation. If I understand you correctly, it turns out that the opacity filter in some IE's works for the <input type="file"> element only if its font-size is below 220px. So I have changed the font-size in telerik.common.css and changes will take effect in the next internal build. I am awarding you some Telerik points for your contribution :)

All the best,
Dimo
the Telerik team

[William Dunn]

Well, the smaller font-size seems to work visually in IE9, IE8, IE7, Firefox 4, and Safari 5.

However, I think I have another problem I've just noticed.

The button in my application behaves differently regardless of font size.

IE9, IE8, Firefox 4, and Safari - only clicking the right portion of the button will produce the dialog.
IE7 - works perfectly

So I tried out the css snippet on http://jsfiddle.net/n3Qjm/ and your demo site and I don't have that problem.

My page is basically your razor view of the synchronous upload example.
 
Could my telerik.common.min.css contain something different than the snippet on jsfiddle our your demo site? I'm using version 2011.1.414.

Hopefully I'm still making sense. I've looked at a lot of browsers and done a lot of clicking this morning. :)

Thank You.

 

[William Dunn]

Found my problem...

Had left this in my Site.css

input[type="file"]

{

 

 

width: 50%;

 

 

}

[Ryan]

I'm using version 2011.1.414 as well. I've tried changing the font in the .t-upload-button input section of jfiddle and the button displays and works properly. Is there any edit I can manually do to my telerik script to allow my button to work until the next internal build is released? I have a project deadline coming up and would like to use the mvc upload button but cannot if it displays incorrectly.

[Dimo]

Hello,

Ryan - you can use this CSS rule anywhere in your web application:

input.t-upload-button input
{
    font: 200px monospace !important;
}


You can also find this CSS rule in telerik.common.css and change 500px to 200px.

William - can you please confirm once again that reducing the font size makes the opacity work in IE? Make sure that the invisible <input> element is really positioned where it should and that when you click on the styled button, the file browser dialog appears. Thank you.

Kind regards,
Dimo
the Telerik team

[William Dunn]

I think it fixes the opacity in my particular version of IE8 (on windows 64-bit).

I'm doing an override instead of changing telerik.common.min.css.

Since the 500px in telerik.common seems to work for about every other browser, I would be completely fine with you not changing your internal build until more feedback comes in from the user community.

Thank you for your effort in addressing this and for such an awesome product!

[Michael]

I get a strange bug that I think is partially related to this issue. It only occurs on one of our tester's browsers (at first we had the invisible button bug as well but it was fixed in the Q2 release). I'll demonstrate the issue with a picture (see phantomdiv.png).

In most browsers this phantom div is just fine. On our tester's machine, clicking anywhere on the phantom div (including on the detail expansion icon in the first three rows of the grid), is the same as clicking on the button itself. We've tried setting the Div's z-index to 0 (and explicitly setting the Grid's z-index to 1) and a number of other tricks. But no matter what, we get the same issue.

[Kamen Bundev]

Hello Michael,

Can you provide some more information about the browser in question, like browser name and version? Also a live URL would be very helpful, if possible, so that we can try to isolate the issue and help you fix it. You can open a support ticket if you prefer the privacy.

Kind regards,
Kamen Bundev
the Telerik team

[Michael]

It turns out that our tester was using Microsoft Test Manager to record his actions on the website. The script injected by MTM to work its magic breaks our usage of telerik tools.

[Kamen Bundev]

Hello Michael,

Indeed, Microsoft Test Manager injects elements before the HTML tag and thus triggers all IE7 *+html hacks which we use in our controls. Unfortunately there's no universal fix for that besides removing all IE7 hacks from the CSS.

Best wishes,
Kamen Bundev
the Telerik team

[Andrew]

I've tried pretty much everything this thread and I still have a couple of computers where the select button doesn't show up.  Using tools I've traced the offending style to the position element in .ruFileWrap.  if I change it the select box and the button appear but i get a random image appearing on the page.  Hopes this helps.

[T. Tsonev]

Hello Andrew,

We hoped this issue is solved for good, but apparently this is not the case. We'll need more information about your scenario and the configuration of the machines that experience the problem. 

Please open a support ticket and we'll do our best to resolve the problem.

Best regards,
Tsvetomir Tsonev
the Telerik team