Why I cant see html element on Internet Explorer?

Question

I work on my angularjs project.

I created HTML view that changes modes from display view to edit view by click on the button.

I created css class named edit-mode.

Here is my view:

<form class="form-horizontal form-sm">
  <div ng-class="{'edit-mode':editor.edit}">

    <div class="form-group">
      <div class="col-xs-8">
        <span class="view">{{ma.inspection}}</span>
        <textarea cols="20" rows="2" my-maxlength="5" ng-model="ma.inspection" class="form-control edit"></textarea>
      </div>
    </div>
    <br/>
    <input type="button" ng-click="editor.edit = false" value="Display mode">
    <input type="button" ng-click="editor.edit = true" value="Edit mode">

  </div>
</form>

Here is controller:

var app = angular.module('myApp', ['ngAnimate']);
app.controller('MyApp', [function() {
  var self = this;
  this.inspection = "Click on button to change mode!";

}]);

Here is my css code:

.edit, input[type=file].edit {

    display: none;
}

.edit-mode {
    .view {
        display: none;
        background-color:red;
    }

    .edit, input[type=file].edit {
        display: initial;
    }
}

The code above works perfect in chrome browser. But it not works on IE browser(I use IE 11) the textarea element and select element not displayed .

Any Idea how can I fix this problem,to make this work also on IE browser?

What is the issue exactly? `Not works on IE browser`, there are tons of things that can't work here. I can't visit plunker from work. — Marcos Pérez Gude, May 16 '16 at 15:31
The problem is `display='initial'` change it to `display='block'`. — Akash Amin, May 16 '16 at 15:39

score 3 · Answer 1 · edited May 23 '17 at 10:28

3

The problem is display='initial' change it to display='block'. Refer the link below: Div display:initial not working as intended in ie10 and chrome 29

edited May 23 '17 at 10:28

Community

1
1

answered May 16 '16 at 15:40

Akash Amin

2,741
19
38

form elements are display inline and inline-block, not block. – Marcos Pérez Gude May 16 '16 at 15:41
Yes you are right. I was just curious to say initial doesn't work. Thats why I posted a link here.Thanks.@MarcosPérezGude – Akash Amin May 16 '16 at 15:42
You are welcome. I only notice you, with the purpose you can learn what's the initial value in some elements. Good luck! – Marcos Pérez Gude May 16 '16 at 15:45

score 3 · Accepted Answer · answered May 16 '16 at 15:41

initial keyword doesn't work on IE. That's fine, the correct behaviour of IE (nothing works). But to fix your problem, write the correct that's inline for form elements.

 display: inline

And for textarea

 display: inline-block

Final code:

.edit-mode {
    .view {
        display: none;
        background-color:red;
    }

    .edit, input[type=file].edit {
        display: inline-block;
    }
}

score 2 · Answer 3 · answered May 16 '16 at 15:49

Like all the other answers say, display:initial; is not supported by IE. Therefore, the best cross browser solution with AngularJS is to use ng-show to dynamically hide elements, instead of CSS.

I've tested this to work on Internet Explorer 11. Note how I don't use the classes.

<body>
  <link href="style.css" rel="stylesheet" />
  <div ng-controller="MyApp as ma">

    <form class="form-horizontal form-sm">
      <!--<div ng-class="{'edit-mode':editor.edit}">-->

        <div class="form-group">
          <div class="col-xs-8">
            <span ng-init="editor.edit=false" ng-show="editor.edit == false">{{ma.inspection}}</span>
            <textarea cols="20" rows="2" ng-show="editor.edit == true" my-maxlength="5" ng-model="ma.inspection" class="form-control"></textarea>
          </div>
        </div>
        <br/>
        <input type="button" ng-click="editor.edit = false" value="Display mode">
        <input type="button" ng-click="editor.edit = true" value="Edit mode">

      <!--</div>-->
    </form>



  </div>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script>
    var app = angular.module('myApp', ['ngAnimate']);
    app.controller('MyApp', [function() {

      // default 
      editor = {};
      editor.edit = false;

      var self = this;
      this.inspection = "Click on button to change mode!";

    }]);
  </script>
</body>

Why I cant see html element on Internet Explorer?

3 Answers3