This is a migrated thread and some comments may be shown as answers.
Upload Control - Partially Visible
64 Answers 339 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
sasho
Top achievements
Rank 1
sasho asked on 23 Mar 2011, 12:28 AM
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.

64 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 23 Mar 2011, 07:45 AM
Hi sasho,

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

Regards,
Atanas Korchev
the Telerik team
0
Jennifer Hughes
Top achievements
Rank 1
answered on 23 Mar 2011, 04:48 PM
I'm seeing the same behavior in Internet Explorer as the OP, see attached. Slightly newer build of IE8 than Alex's
0
Dimo
Telerik team
answered on 24 Mar 2011, 09:07 AM
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
0
Jennifer Hughes
Top achievements
Rank 1
answered on 25 Mar 2011, 06:14 PM
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.
0
Atanas Korchev
Telerik team
answered on 25 Mar 2011, 09:18 PM
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
0
Sven
Top achievements
Rank 1
answered on 27 Mar 2011, 01:57 PM
I have the same issue as the TS.

Browser: IE 8
Version: 8.0.7600.16385
0
Dimo
Telerik team
answered on 28 Mar 2011, 09:11 AM
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
0
sasho
Top achievements
Rank 1
answered on 01 Apr 2011, 02:49 PM
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?
0
T. Tsonev
Telerik team
answered on 01 Apr 2011, 03:43 PM
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:

Upload ActiveX

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Lena
Top achievements
Rank 1
answered on 01 Apr 2011, 03:47 PM
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.
0
Sven
Top achievements
Rank 1
answered on 02 Apr 2011, 06:06 PM
The solution given by Telerik Admin, doesn't work at mine PC, unfortunately !
0
T. Tsonev
Telerik team
answered on 04 Apr 2011, 09:49 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Lena
Top achievements
Rank 1
answered on 04 Apr 2011, 10:55 AM

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
0
T. Tsonev
Telerik team
answered on 05 Apr 2011, 08:08 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Lena
Top achievements
Rank 1
answered on 05 Apr 2011, 08:24 AM

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
0
T. Tsonev
Telerik team
answered on 05 Apr 2011, 09:08 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Lena
Top achievements
Rank 1
answered on 05 Apr 2011, 09:30 AM

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

0
T. Tsonev
Telerik team
answered on 05 Apr 2011, 09:41 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Lena
Top achievements
Rank 1
answered on 05 Apr 2011, 09:49 AM

Hi!

Here is a screenshot, hope it helps?

Best regards, Lena
0
T. Tsonev
Telerik team
answered on 06 Apr 2011, 07:54 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Lena
Top achievements
Rank 1
answered on 06 Apr 2011, 08:40 AM

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
0
T. Tsonev
Telerik team
answered on 06 Apr 2011, 09:34 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Lena
Top achievements
Rank 1
answered on 06 Apr 2011, 10:17 AM

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

Best regards, Lena
0
Matthew
Top achievements
Rank 1
answered on 06 Apr 2011, 10:32 PM
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?
0
Ryan
Top achievements
Rank 1
answered on 06 Apr 2011, 11:31 PM
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.
0
Lena
Top achievements
Rank 1
answered on 07 Apr 2011, 08:10 AM

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.
0
T. Tsonev
Telerik team
answered on 07 Apr 2011, 09:07 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Ryan
Top achievements
Rank 1
answered on 08 Apr 2011, 02:03 AM

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.

0
T. Tsonev
Telerik team
answered on 08 Apr 2011, 09:06 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Andreas Botsikas
Top achievements
Rank 2
answered on 10 Apr 2011, 04:57 PM
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();});

0
Lena
Top achievements
Rank 1
answered on 11 Apr 2011, 08:23 AM

Hello again,

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

Best regards, Lena
0
T. Tsonev
Telerik team
answered on 11 Apr 2011, 12:43 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Lena
Top achievements
Rank 1
answered on 11 Apr 2011, 01:45 PM

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
0
T. Tsonev
Telerik team
answered on 11 Apr 2011, 01:51 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Lena
Top achievements
Rank 1
answered on 11 Apr 2011, 02:38 PM

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
0
Dimo
Telerik team
answered on 11 Apr 2011, 04:19 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Andreas Botsikas
Top achievements
Rank 2
answered on 11 Apr 2011, 06:02 PM
http://jsfiddle.net/CsyDv/1/ works perfectly!!!
Will this change make it in the service pack?
 Thank you for your time!
0
Dimo
Telerik team
answered on 12 Apr 2011, 07:08 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Simon
Top achievements
Rank 1
answered on 19 Apr 2011, 11:50 AM
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
0
Dimo
Telerik team
answered on 19 Apr 2011, 12:19 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Andreas Botsikas
Top achievements
Rank 2
answered on 22 Apr 2011, 02:13 PM
I am sorry for my delayed answear, both links work fine ( I just didn't notice the new urls).
0
William Dunn
Top achievements
Rank 1
answered on 27 Apr 2011, 02:50 PM
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.
 
0
Dimo
Telerik team
answered on 28 Apr 2011, 09:52 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
William Dunn
Top achievements
Rank 1
answered on 02 May 2011, 07:28 PM
yes, I see the red and blue squares with the purple overlapping.
0
Dimo
Telerik team
answered on 03 May 2011, 08:29 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
William Dunn
Top achievements
Rank 1
answered on 03 May 2011, 12:42 PM
Good morning,

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

0
Dimo
Telerik team
answered on 03 May 2011, 12:56 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
William Dunn
Top achievements
Rank 1
answered on 03 May 2011, 01:11 PM
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.
0
Dimo
Telerik team
answered on 03 May 2011, 04:02 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
William Dunn
Top achievements
Rank 1
answered on 05 May 2011, 12:46 PM
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,

0
Dimo
Telerik team
answered on 05 May 2011, 01:32 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
William Dunn
Top achievements
Rank 1
answered on 05 May 2011, 02:24 PM
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


0
Dimo
Telerik team
answered on 05 May 2011, 03:27 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
William Dunn
Top achievements
Rank 1
answered on 05 May 2011, 05:05 PM
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.

 

0
William Dunn
Top achievements
Rank 1
answered on 05 May 2011, 05:26 PM
Found my problem...

Had left this in my Site.css

input[type="file"]

{

 

 

width: 50%;

 

 

}

0
Ryan
Top achievements
Rank 1
answered on 06 May 2011, 07:39 AM
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.
0
Dimo
Telerik team
answered on 06 May 2011, 08:08 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
William Dunn
Top achievements
Rank 1
answered on 06 May 2011, 04:36 PM
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!
0
Michael
Top achievements
Rank 2
answered on 22 Aug 2011, 08:00 PM
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.
0
Kamen Bundev
Telerik team
answered on 23 Aug 2011, 10:18 AM
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

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
Michael
Top achievements
Rank 2
answered on 23 Aug 2011, 11:41 AM
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.
0
Kamen Bundev
Telerik team
answered on 23 Aug 2011, 12:50 PM
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

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
Andrew
Top achievements
Rank 1
answered on 18 Oct 2011, 07:08 PM
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.
0
T. Tsonev
Telerik team
answered on 19 Oct 2011, 08:11 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
Tags
Upload
Asked by
sasho
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Jennifer Hughes
Top achievements
Rank 1
Dimo
Telerik team
Sven
Top achievements
Rank 1
sasho
Top achievements
Rank 1
T. Tsonev
Telerik team
Lena
Top achievements
Rank 1
Matthew
Top achievements
Rank 1
Ryan
Top achievements
Rank 1
Andreas Botsikas
Top achievements
Rank 2
Simon
Top achievements
Rank 1
William Dunn
Top achievements
Rank 1
Michael
Top achievements
Rank 2
Kamen Bundev
Telerik team
Andrew
Top achievements
Rank 1
Share this question
or