I am currently working on my angularjs project.
One of the features I have implemented is an HTML view that switches between display mode and edit mode when a button is clicked.
To style this functionality, I created a CSS class called edit-mode.
You can check out the live version on Plunker.
Below is the code for 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 the controller code:
var app = angular.module('myApp', ['ngAnimate']);
app.controller('MyApp', [function() {
var self = this;
this.inspection = "Click on the button to change modes";
}]);
And here is the CSS code I used:
.edit, input[type=file].edit {
display: none;
}
.edit-mode {
.view {
display: none;
background-color:red;
}
.edit, input[type=file].edit {
display: initial;
}
}
While this code works perfectly in Chrome, I encountered some issues with Internet Explorer (specifically IE 11) where the textarea and select elements are not displayed properly. Does anyone have any ideas on how to fix this and make it work seamlessly across all browsers?