CODEWITHSUNDEEP
htmlcssinternet-explorerfile-uploadinternet-explorer-8
actaram
actaram

Reputation: 2058

How to vertically align filename on file input in IE8

I have a page with a FileUpload control rendered dynamically. At runtime, Asp generates the following input:

<input name="ctl00$ContentPlaceHolder1$ucPF$ucCustomField2$field2" id="field2" 
       type="file" Validators="[object HTMLSpanElement]" 
       cachedHoverStateItem="[object Object]"/>

In Google Chrome, the display seems to be spot on:

Google Chrome display image

However, in IE8, not so much:

Internet Explorer 8 display image

I know it's a small detail, but it still bothers me unreasonably. Any one of you would happen to know why the text is not vertically aligned and what can I do to fix it? Perhaps it's not a normal behaviour and I'm doing something wrong on my end?

I have tried adding the following CSS:

input[type="file"] {
    line-height: 1ex;
}

But it didn't change anything.

Upvotes: 0

Views: 187

Answers (2)

Bas Dalenoord
Bas Dalenoord

Reputation: 519

File inputs are actually platform dependent and there is no standard way to style them... I've worked with them in the past and what most people tend to do is create an invisible file input and a separate text-input/button combi. The on-click of the button then triggers the on-click of the file input, and after the file input has a value it is copied to the text-input via Javascript.

Something like this (pseudo-code):

<input type="file" id="file" style="visibility:hidden" onchange="setFile(this.files[0])" />
<input type="text" id="filename">
<button onclick="document.getElementById('file').click()" />

With something like this in Javascript:

function setFile(file) {
    var input = document.getElementById("filename");
    input.value = file.name;
}

The code above asserts you're only supporting browsers which support the new (in progress draft) of the File API, there will certainly be ways to do this for older browsers as well...

Another approach (which works for older browsers) is described here

Upvotes: 1

Millhorn
Millhorn

Reputation: 3166

input[type="file"] {
    line-height: 1ex;
}

Is this the line height of your text box? I thought ex indicated the height of the letter itself. Try adding the height of the actual box.

Upvotes: 0

Related Questions