Display Issue in Internet Explorer 8

[iuliana]

Hi,
This component has been an answer to my prayers as a lot of the people I was working for want a pretty file selector and internationalizable too and they do not like it when I tell them that beautifying a file selector is not recommended nor easy.
Unfortunately, there is a display bug in Internet Explorer 8. (See the attached printscreen)
Is there a workaround for this or any attribute I must use to get rid of this ?
Thank you!

[iuliana]

Hi,
I was looking in source code in Developer Tolls of IE 8 and I noticed that on the hidden element in the style element the "clip: rect(0px 0px 0px 0px);" value is missing. I noticed in Chrome that the value is there. Could this be the cause?

And if it helps here is how I customized my input elements:
<input type="file" id="productFile" name="productFile" class="filestyle" data-buttonText="Seleccione Archivo"/>

[iuliana]

Hi,
I started reading about clip and the support for IE8 and discovered that is it partially supported in IE8 if the old syntax is used.
So I modified your code , line 229 in bootstrap-filestyle.js, version 1.1.0 and replaced
this
.css({'position': 'absolute', 'clip': 'rect(0, 0, 0, 0)'})
with this
.css({'position': 'absolute', 'clip': 'rect(0px 0px 0px 0px)'})
And now it is being displayed OK on all browsers.

[solverat]

Why is this closed? The Problem still exists.

[markusslima]

Better specify where this is still occurring

[solverat]

sorry, on windows vista and ie8, the problem still appears. (Original upload button is visible)

On 29.05.2014, at 21:20, Moogles notifications@github.com wrote:

Better specify where this is still occurring

—
Reply to this email directly or view it on GitHub.

[iuliana]

So,
I have no idea what happened, Friday, when I did the pull request it was working. Next Monday it was not.
After a trying a lot of javascript and jQuery solutions the only way to hide the component behind was to add:

<style> .ie8fix { clip: rect(0px 0px 0px 0px); } </style>

And declare the input file component like this:
<input type="file" id="uploadedFile" name="uploadedFile" class="filestyle ie8fix"
data-buttonText="Select File">

Fortunately for me my client is not interested in IE8 support anymore. But if you need a workaround, you have mine now.

[solverat]

@iuliana Thank you - that worked!
btw: "my client is not interested in IE8 support anymore" - what a great client! ;)

[hooboy]

I Think this is file input add style width: 100%; height: 100%; font-size: 300px; position: absolute; top: 0; left:0; opacity: 0; filter: Alpha(Opacity=0); this is input wrapper add style specifies the width and height and overflow:hidden; 。This is Great fixed !