Search code examples
jqueryhtmlcssangularjsinternet-explorer-9

Angular Responsive Table not working on Internet Explorer 9 (IE 9). Works with IE 10

I am really hoping someone can help me on this one. I am trying to using a simple, but excellent, Angular responsive table plugin by André Werlang (aka awerlang).

It works great on IE 10+, Chrome and Firefox. As the title says, it does not work on IE 9. Here is a Live Demo of the plugin that you can open in IE (and emulate IE 9 through debugger, or however possible).

I am using the ng-repeat example with Bootstrap (2nd from last). Data loads and everything, but the resizing into a stack table does not work properly. I have tried adding 'data-' prefix to the 'ng-app' and 'ng-controller', but no change.

Plunker Demo || JSFiddle Demo

<!DOCTYPE html>
<html data-ng-app="app">

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="https://cdn.rawgit.com/awerlang/angular-responsive-tables/master/release/angular-responsive-tables.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.rawgit.com/awerlang/angular-responsive-tables/master/release/angular-responsive-tables.min.css">
</head>

<body data-ng-controller="TestController as ctrl">
  <table class="table table-bordered table-striped table-hover" wt-responsive-table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Version</th>
        <th>Language</th>
        <th>Maintainer</th>
        <th>Stars</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in ctrl.projects">
        <td>{{item.name}}</td>
        <td>{{item.version}}</td>
        <td>{{item.language}}</td>
        <td>{{item.maintainer}}</td>
        <td>{{item.stars}}</td>
      </tr>
    </tbody>
  </table>

  <script>
    function TestController() {
      this.projects = [
        {name: "AngularJS", version: "1.5", language: "JavaScript", maintainer: "Google", stars: 35000},
        {name: "Bootstrap", version: "3.3", language: "CSS", maintainer: "Twitter", stars: 23000}, 
        {name: "UI-Router", version: "0.13", language: "JavaScript", maintainer: "AngularUI", stars: 15000}
      ];
    }

    var app = angular.module('app', ['wt.responsive']);
    app.controller('TestController', TestController);
  </script>
</body>

</html>

How it should display (IE 11) vs How it displays (IE 9) - Sorry for large snapshots.

enter image description here

enter image description here

Thanks in advance!

Solution

  • One thing you could try is adding float: left; to each element in the table. I've also had luck with tables in IE 9 by adding <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> to the top of the page. Let me know if this works!