On this simple website (www.enverter), input type="text" is not working in Internet explorer 10. However, it works fine with Chrome and Safari.
By not workin I mean this: Bootstrap Form Control of "text" input type (with some custom styling) is not displaying text in Internet Explorer 10 and FireFox but displays as expected in Chrome, Safari, and Edge.
I am not sure if it is bootstrap issue or something else I am missing. I do have following meta tags set at the beginning of the head section and I am using bootstrap 3.3.4 version.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
I don't see any errors in console.
Here is the JSFiddle: /
Anyone has pointers regarding how to fix it?
Complete code is pasted below
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Form Control Not working in Internet Explorer and Safari</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* e first in the head; any other head content must e *after* these tags -->
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href=".3.4/css/bootstrap.min.css">
<!-- Latest piled and minified JavaScript -->
<script src=".3.4/js/bootstrap.min.js"></script>
<style>
.CustomInputStyle
{
text-align: center;
margin-top: 20px;
padding: 25px;
font-size:24px;
font-weight:bold;
}
</style>
</head>
<body>
<div>
<h1 class="text-center">
Bootstrap Form Control (with some custom styling) rendering error in Internet Explorer and Safari
</h1>
<h3 class="text-center">
Test to find out why Bootstrap Form Control of "text" input type (with some custom styling) is not displaying text in Internet Explorer 10 and Safari but displays as expected in Chrome, Edge and Safari.
</h3>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<div class="row">
<div class="col-md-12">
<h3 style="color:red"> Test: </h3>
<br>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control CustomInputStyle" value="Test input 1">
</div>
<div class="col-md-6">
<input type="text" class="form-control CustomInputStyle" value="Test input 2">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
On this simple website (www.enverter.), input type="text" is not working in Internet explorer 10. However, it works fine with Chrome and Safari.
By not workin I mean this: Bootstrap Form Control of "text" input type (with some custom styling) is not displaying text in Internet Explorer 10 and FireFox but displays as expected in Chrome, Safari, and Edge.
I am not sure if it is bootstrap issue or something else I am missing. I do have following meta tags set at the beginning of the head section and I am using bootstrap 3.3.4 version.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
I don't see any errors in console.
Here is the JSFiddle: https://jsfiddle/pjdixit/kfev4rss/
Anyone has pointers regarding how to fix it?
Complete code is pasted below
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Form Control Not working in Internet Explorer and Safari</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* e first in the head; any other head content must e *after* these tags -->
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Latest piled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.CustomInputStyle
{
text-align: center;
margin-top: 20px;
padding: 25px;
font-size:24px;
font-weight:bold;
}
</style>
</head>
<body>
<div>
<h1 class="text-center">
Bootstrap Form Control (with some custom styling) rendering error in Internet Explorer and Safari
</h1>
<h3 class="text-center">
Test to find out why Bootstrap Form Control of "text" input type (with some custom styling) is not displaying text in Internet Explorer 10 and Safari but displays as expected in Chrome, Edge and Safari.
</h3>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<div class="row">
<div class="col-md-12">
<h3 style="color:red"> Test: </h3>
<br>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control CustomInputStyle" value="Test input 1">
</div>
<div class="col-md-6">
<input type="text" class="form-control CustomInputStyle" value="Test input 2">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- can you fiddle it? – rafon Commented Sep 22, 2017 at 5:43
- It doesn't work in Firefox either (meaning, the input fields don't display what you type). Can you supply your code? – Peter Abolins Commented Sep 22, 2017 at 5:50
- I did not have access to the development puter at the time of posting. I will do some more testing tomorrow and try to narrow down the problem and post it on JSFidde. Thanks@ – Prasad Dixit Commented Sep 22, 2017 at 5:50
- Great - also... you probably want to elaborate on not working. It is meaningless, and forces us to do extra work to figure out exactly what it is that isn't working, and what the errors are. – Peter Abolins Commented Sep 22, 2017 at 5:57
- @PeterAbolins: By not workin I mean, Bootstrap Form Control of "text" input type (with some custom styling) is not displaying text in Internet Explorer 10 but displays as expected in Chrome, Safari, and Edge. – Prasad Dixit Commented Sep 23, 2017 at 19:43
2 Answers
Reset to default 4An alternative answer, because I needed to know why. Firefox uses a different box sizing model. Form padding differences in Firefox and Opera/Chrome/IE
Without adding the bootstrap class input-lg, you can either solve your issue (in Firefox) by setting a height on the input style, and adjusting the padding accordingly (height - (padding-top + padding-bottom) = height available for your text). Or, you can add the box-sizing element to the css with a value of content-box:
.CustomInputStyle {
text-align: center;
margin-top: 20px;
height: 75px; /* This makes the available font height = 25px */
padding: 25px;
font-size: 24px;
font-weight: bold;
box-sizing: content-box;
/* Firefox default = border-box, Other browsers = content-box */
}
I am guessing that IE 10 has a slightly different problem which would be fixed by making the padding smaller (or removing it) and setting an explicit height on the style.
OK, I was able to make it work and render as expected on all browsers after couple of minor modifications:
I added the class "input-lg" and removed margin and padding from my CustomInputStyle class
.CustomInputStyle {
text-align: center;
margin-top: 20px;
padding: 25px;
font-size: 24px;
font-weight: bold;
}
.CustomInputStyle2 {
text-align: center;
font-weight: bold;
font-size: 24px;
}
Here is the fiddle which demonstrate this: https://jsfiddle/pjdixit/kfev4rss/4/
Test Input 1's text (which used previous styling) won't be visible and won't display typed text in Internet Explorer and Firefox but Test Input 2 (which uses modified styling described above) should work in all major browsers.