javascript - <input type="file"> positioning issues in IE11 browser

#upload-file-container {
  width: 50px;
  height: auto;
  overflow: hidden;
}
#upload-file-container input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border: solid transparent;
  border-width: 0 0 100px 200px;
  opacity: 0.0;
  filter: alpha(opacity=100);
  -o-transform: translate(250px, -50px) scale(1);
  -moz-transform: translate(-300px, 0) scale(4);
  direction: ltr;
  cursor: pointer;
}
.buttonText {
  color: #FFFFFF;
  letter-spacing: normal;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-variant: normal;
  font-size: 11pt font-style: normal;
  text-decoration: none;
  text-transform: none;
  width: 20px;
}
.buttonSpace {
  height: 23px;
  width: 20;
  background-image: url(/portal/images/clearpixel.gif);
}
.buttonRegHead {
  height: 23px;
  width: 7px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_head.gif);
  background-repeat: no-repeat;
}
.buttonRegBody {
  height: 23px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_body.gif);
  background-repeat: repeat-x;
}
.buttonRegTail {
  height: 23px;
  width: 7px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_tail.gif);
  background-repeat: no-repeat;
}

<html>
<table>
  <tr>
    <td align="left" nowrap class="formLabel">IMAGE1:<font color="red">*</font>
    </td>
    <TD>
      <table border=0 cellspacing=0 cellpadding=0>
        <tr>
          <td class='buttonSpace'>&nbsp;</td>
          <td class='buttonRegHead'>&nbsp;</td>
          <td class='buttonRegBody'>
            <div class="buttonText" id="upload-file-container">Browse
              <input type="file" name="realfile1" id="realfile1" onChange="if(validate())preview(this, '1');return true;" />
            </div>
          </td>
          <td class='buttonRegTail'>&nbsp;</td>
        </tr>
      </table>
    </TD>
  </tr>
</table>

</html>

#upload-file-container {
  width: 50px;
  height: auto;
  overflow: hidden;
}
#upload-file-container input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border: solid transparent;
  border-width: 0 0 100px 200px;
  opacity: 0.0;
  filter: alpha(opacity=100);
  -o-transform: translate(250px, -50px) scale(1);
  -moz-transform: translate(-300px, 0) scale(4);
  direction: ltr;
  cursor: pointer;
}
.buttonText {
  color: #FFFFFF;
  letter-spacing: normal;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-variant: normal;
  font-size: 11pt font-style: normal;
  text-decoration: none;
  text-transform: none;
  width: 20px;
}
.buttonSpace {
  height: 23px;
  width: 20;
  background-image: url(/portal/images/clearpixel.gif);
}
.buttonRegHead {
  height: 23px;
  width: 7px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_head.gif);
  background-repeat: no-repeat;
}
.buttonRegBody {
  height: 23px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_body.gif);
  background-repeat: repeat-x;
}
.buttonRegTail {
  height: 23px;
  width: 7px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_tail.gif);
  background-repeat: no-repeat;
}

<html>
<table>
  <tr>
    <td align="left" nowrap class="formLabel">IMAGE1:<font color="red">*</font>
    </td>
    <TD>
      <table border=0 cellspacing=0 cellpadding=0>
        <tr>
          <td class='buttonSpace'>&nbsp;</td>
          <td class='buttonRegHead'>&nbsp;</td>
          <td class='buttonRegBody'>
            <div class="buttonText" id="upload-file-container">Browse
              <input type="file" name="realfile1" id="realfile1" onChange="if(validate())preview(this, '1');return true;" />
            </div>
          </td>
          <td class='buttonRegTail'>&nbsp;</td>
        </tr>
      </table>
    </TD>
  </tr>
</table>

</html>

I am having a web application with many file inputs. I have hidden all the files elements and place a button. This is working correctly in IE8 to IE10 browsers. But not in IE11. Below is my code Snippet:

<style>
    #upload-file-container {
        width:50px;
        height: auto;
        overflow: hidden;
    }
    #upload-file-container input {
        position: absolute;
        top: 0; right: 0; margin: 0;
        border: solid transparent;
        border-width: 0 0 100px 200px;
        opacity: 0.0;
        filter: alpha(opacity=0);
        -o-transform: translate(250px, -50px) scale(1);
        -moz-transform: translate(-300px, 0) scale(4); 
        direction: ltr;
        cursor: pointer;
    }
    .buttonText {
        color: #FFFFFF;
        letter-spacing: normal;
        font-family: Arial, sans-serif;
        font-weight: bold;
        font-variant: normal;
        font-size: 11pt
        font-style: normal;
        text-decoration: none;
        text-transform: none;
        width: 20px;
    }
</style>

<table border=0 cellspacing=0 cellpadding=0>
    <tr> 
        <td class='buttonSpace'>&nbsp;</td>
        <td class='buttonRegHead'>&nbsp;</td>
        <td class='buttonRegBody'>
            <div  class="buttonText" id="upload-file-container">    
                <%=DipapDictionary.translate(request,"Browse")%>
                <input type="file" name="realfile1" id="realfile1" onChange="if(validate())preview(this, '1');return true;"/>
            </div>
        <td class='buttonRegTail'>&nbsp;</td>
    </tr>
</table>

It is working correctly in IE10 browser. The file input is ing over the button and the button bees clickable. So, I am able to browse the file . But in IE11 browser the html file element is ing somewhere in the top of the page and the browse button is not clickable.

Share Improve this question edited Dec 8, 2015 at 13:23 asked Dec 4, 2015 at 15:12 Nagesh 4941 gold badge9 silver badges28 bronze badges

1 can you share a working fiddle? – Deepak Yadav Commented Dec 8, 2015 at 10:24
@DeepakYadav: Have added a small code snippet. please let me know if you want more information – Nagesh Commented Dec 8, 2015 at 13:24
1 You're missing a semi-colon after the line: font-size: 11pt No idea if it's behind this issue, but it certainly won't help. – Chuck Le Butt Commented Dec 8, 2015 at 16:08

Add a ment |

5 Answers 5

Sorted by: Reset to default 1

For IE11 you just need to define your CSS width and height of your #upload-file-container input CSS rule

http://codepen.io/jonathan/pen/LGEJQg/?editors=110

Open the above link in IE11 and you will see the browse file input trigger

#upload-file-container input {
    width:100%;
    height:100%;
}

So your CSS rule altogether looks like this:

#upload-file-container input {
    position: absolute;
    top: 0; right: 0; margin: 0;
    border: solid transparent;
    border-width: 0 0 100px 200px;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -o-transform: translate(250px, -50px) scale(1);
    -moz-transform: translate(-300px, 0) scale(4); 
    direction: ltr;
    cursor: pointer;

    width:100%; /* add width */
    height:100%; /* add height */
}

There is really no need to use a CSS transform scale() or transform translate() on your #upload-file-container input element, if you need to make it fit or be bigger.

All you would need to set is a width and height of the element. Especially for IE11 since it requires a width and height since they are not being inherited by their parent elements.

It is quite strange because I tested your snippet on IE 9 & 10 and it wasn't working there as well.

The reason I presume is because you have prefixed transform for Opera & Mozilla vendors

-o-transform: translate(250px, -50px) scale(1);
-moz-transform: translate(-300px, 0) scale(4);

But don't have a standard transform like this:

transform: translate(-300px, 0) scale(4);

Or a Microsoft-prefixed transform like this:

-ms-transform: translate(-300px, 0) scale(4);

So when I put it in, it was working as you described: run well on IE 9 & 10 but doesn't work on IE11. So I reckon this is how your actual css is supposed to be.

Anyway, to solve the problem: Apparently translate2d is not working well together with scale on IE11. So My suggestion is to remove the scale part, reducing it to simply transform: translate(-300px, 0);. And so, it works again:

#upload-file-container {
  width: 50px;
  height: auto;
  overflow: hidden;
}
#upload-file-container input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border: solid transparent;
  border-width: 0 0 100px 200px;
  opacity: 0.0;
  filter: alpha(opacity=100);
  -o-transform: translate(250px, -50px) scale(1);
  -moz-transform: translate(-300px, 0) scale(4);
  -ms-transform: translate(-300px, 0);
  direction: ltr;
  cursor: pointer;
}
.buttonText {
  color: #FFFFFF;
  letter-spacing: normal;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-variant: normal;
  font-size: 11pt font-style: normal;
  text-decoration: none;
  text-transform: none;
  width: 20px;
}
.buttonSpace {
  height: 23px;
  width: 20;
  background-image: url(/portal/images/clearpixel.gif);
}
.buttonRegHead {
  height: 23px;
  width: 7px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_head.gif);
  background-repeat: no-repeat;
}
.buttonRegBody {
  height: 23px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_body.gif);
  background-repeat: repeat-x;
}
.buttonRegTail {
  height: 23px;
  width: 7px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_tail.gif);
  background-repeat: no-repeat;
}

<html>
<table>
  <tr>
    <td align="left" nowrap class="formLabel">IMAGE1:<font color="red">*</font>
    </td>
    <TD>
      <table border=0 cellspacing=0 cellpadding=0>
        <tr>
          <td class='buttonSpace'>&nbsp;</td>
          <td class='buttonRegHead'>&nbsp;</td>
          <td class='buttonRegBody'>
            <div class="buttonText" id="upload-file-container">Browse
              <input type="file" name="realfile1" id="realfile1" onChange="if(validate())preview(this, '1');return true;" />
            </div>
          </td>
          <td class='buttonRegTail'>&nbsp;</td>
        </tr>
      </table>
    </TD>
  </tr>
</table>

</html>

Edit: since you took the effort to give different browsers different transform value, I will follow suite and use -ms-transform in my answer. But I would suggest having a standardized transform in your css as well, up to your decision.

Consider using this much simpler approach to achieve the same thing:

<label>
    Click me!
    <input type="file" style="display:none" onchange="alert('do stuff')"/>
</label>

The file input is hidden, but clicking on the label will trigger the file dialog.

No javascript needed. No absolute positioning needed.

You could simply tell IE11 to behave as IE10, by putting the following meta-tag in your <head>:

<meta http-equiv="X-UA-Compatible" content="IE=10">

My personal preference, though, when working with <input type="file"> is to hide it using 'display:none', and manipulate it using javascript. While security issues mean you can't set the value of a file input, you can still trigger the click event, subscribe to the onChange event (as you're already doing), and read the value of a file input, or read from the files property.

How about the following: (Add to CSS)

input[type=file]
{
margin-right:something;
margin-left:something;
left:something;
right:something;
top:something;
bottom:something;
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - <input type="file"> positioning issues in IE11 browser - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)