CODEWITHSUNDEEP
internet-explorertwitter-bootstraptextfield
Marco Marsala
Marco Marsala

Reputation: 2462

Cannot type in textfields in IE11

In my site, I cannot type in textboxes on IE11 on Windows 7. Clicking the text input field, I can see the caret blinking outside the field, positioned in another place in the page. I can reproduce the problem across many computers with IE11.

Setting IE8 via Inspector solves the problem, with IE >= 9 it shows the problem. The site uses Twitter Bootstrap. I tried z-index fixes without success.

Site link: http://fortis7.moutheme.com/

Upvotes: 13

Views: 19218

Answers (5)

QMCO
QMCO

Reputation: 31

It's because Internet Explorer can't understand a CSS value of VW or VH for a font size. Just change your units for text boxes back to pixels (PX) and the problem goes away.

Upvotes: 0

Julesezaar
Julesezaar

Reputation: 3396

I had the same problem and found out that it was the setting of my CSS framework (Foundation) that put a height of 2.4375rem to all inputs... You need to override that! With something like

[type=color],
[type=date],
[type=datetime-local],
[type=datetime],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
textarea {
    height: auto;
}

Upvotes: 2

Maarten Wolfsen
Maarten Wolfsen

Reputation: 1733

I found out the box-sizing: border-box; did not work, so I changed it to content-box:

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
   /* IE10+ specific style */
   input:not([type="select"]),
   input:not([type="submit"]) {
     padding: 15px 20px;
     box-sizing: content-box;
     line-height: normal;
     width: auto;
     height: 15px;
     display: inline-block;
   }
}

Upvotes: 4

s10wen
s10wen

Reputation: 193

I managed to fix this issue by giving it a height.

Upvotes: 5

Jose Browne
Jose Browne

Reputation: 4632

For me looks like >= IE8 has a problem with box-sizing css property.. it seems to be hiding text it cant fit.. I had to adjust my padding and font-size for IE to fix this issue. Not sure if this is the same issue you have.. but worth a shot.

Upvotes: 3

Related Questions