Browse button with input group is cropping on IE9

Question

Using bootstrap, I created input-group with a button and input type='file'.

It is working fine everywhere except IE9. On IE9 the browse button is being cropped from right side.

Demo: http://jsbin.com/alESiBo/6/edit

Code:

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">
      <i class="icon-upload-alt"></i>&nbsp;Upload
    </button>
  </span>
  <input id="fileField" class="form-control" name="fileField" type="file" />
</div>

Output:

IE 9.0.8112.16421

Chrome 31.0.1650.63 m

IE Version with snapshot:

Galloot

I tested your link on IE10; click event on "Browse.." button doesn't even work. It works when I do double click on text field left to "Browse..." button. – Rhaetian

Yup, that is another issue. – Galloot

You might check out this question here: #12261180 – Lindbom

@dward I dont want to change the style of browse button. I am already using bootstrap styling. I just need it to appear properly in IE9. – Galloot

The browse button looks fine for me in IE9 - in that it isn't outside the wrapping container. silvarismarketing.com/traders/dward/browse.JPG – Lindbom

I am using the same exact version except I am on Update Version 9.0.10 and I do not see this issue. – Grefer

I too am unable to reproduce this issue using version 9.0.8112.16421 Update 9.0.21 or 9.0.24. I guess it's possible it was a bug in one or two updates, but I image the percentage of people using that exact version is rather low. – Company

If you read the answer below, you'll get to know something you don't know by now. – Galloot

@ZainShaikh Did you manage to solve this issue? – Occidental

Answer 1

What you are seeing ( the grey part ) is the 'browse..' part of the file upload in IE9. This is 'just the way it is' for the bootstrap css. As other answers have shown, if you do not like this, yeah, just need to have a look into making your own.

Add this in your head tag to prevent further mismatches though...

<meta http-equiv='X-UA-Compatible' content='IE=edge'/>

Most common is to set this control hidden ( I agree it always looks awful and inconsistent ) and 'trigger' it from your own fake button.

Lots of great links from other answers.

Kalliekallista

oh ok, i didn't see it in the jsbin ( wasn't expected to be the solution, just an additional 'normalise' for ie ) – Kalliekallista

The meta tag has to be the first tag inside the head. – Occidental

Answer 2

Like Rob Sedgwick said in his answer this is just the way the control looks in IE, and styling it is not really allowed.

But… you can cheat: make the file input disappear, and create your own fake input. Then redirect the relevant events using JS.

HTML

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">
      <i class="icon-upload-alt"></i>&nbsp;Upload
    </button>
  </span>
  <input id="fileField" class="form-control" name="fileField" type="file" />
  <span class="form-control form-control-overlay" id="fileFieldOverlay">Choose file</span>
</div>

CSS

.form-control[type="file"] {
  margin-bottom: -100%;
  opacity: 0;
}

.form-control-overlay {
  /* style, if you want */
  cursor: pointer;
}

Javascript

var fileFieldEl = document.getElementById("fileField");
var fileFieldOverlayEl = document.getElementById("fileFieldOverlay");

// On change of file selection, update display
fileFieldEl.onchange = function(ev) {
  // remove file path; it's a fake string for security
  fileFieldOverlayEl.innerText = ev.target.value.replace(/^.*(\\|\/)/, '');
};

// Redirect clicks to real file input
fileFieldOverlayEl.onclick = function() {
  fileFieldEl.click();
};

Run the code: http://jsbin.com/alESiBo/16/edit

Paratrooper

Answer 3

add one more class :

bootstrap.css:3296

.input-group {position: relative; display: table; border-collapse: separate; width: 100%;}

try this may be it will be help you out.

Souza

Answer 4

Your code seems to work fine in IE9. http://fiddle.jshell.net/XCN83/1/show/

So, make sure your compatibility mode is not on. (see red circle in the attached image)

If not, some other css you have is affecting it, use the dev tools inspector to find styles applied to the file input box and it's parents working your way up.

Occidental

Answer 5

I will suggest to use your own custom CSS to give same look and feel across the browser and same behavior across the browser. I have used similar approach to take care of this issue in my project. Following are same details also link of JSBIN for live demo.

HTML Code:

<!--Import button-->
    <div class="fileinput-button import-modal-select-file-btn" title="Import file">
        <!--Name of button -->    
        <span>Upload</span>
        <!-- Upload file control-->
        <input id="importFileUploadFileId" type="file" name="file" onchange="uploadFile(this);" />
        <!-- Any hidden field; Generally needed when upload button is part of form-->
        <input type="hidden" name="request" value="value"/>
    </div>

CSS Code (Please customize as per your need):

.fileinput-button {
border-radius: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: #e7e9eb;
border: 1px solid #454b59;
font-family: "Gill Sans","Gill Sans MT","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #454b59;
font-weight: lighter;
font-size: 16px;
cursor: pointer;
overflow: hidden;
position: relative !important;
background-image: none;
height: 30px;
outline: none;
height: 28.5px;
line-height: 28.5px;
}


.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
transform: translate(-300px, 0) scale(4);
font-size: 16px;
direction: ltr;
cursor: pointer;
}

.import-modal-select-file-btn {
width: 50px;
}

Following is live JSBIN link for your reference. http://jsbin.com/EWIGUrEL/1/edit

Hope it may help.

Rhaetian

.(class) input is not supported by IE9 – Coquette

@KID: What are you talking about? Class selectors were in the original CSS v1 spec and every notable browser has supported them for at least fifteen years (I'm sure IE5 did, IE9 certainly does). See Class selectors#Browser Compatibility. That said, IE9 had incompatible support for filter and required -ms-transform rather than transform. – Soar