Search code examples
javascripthtmltwitter-bootstrap-3internet-explorer-10

Input text field not working in Internet explorer 10

On this simple website (www.enverter.com), 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.net/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* come first in the head; any other head content must come *after* these tags -->

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/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>
Solution

  • 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.net/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.