Bonjour,

J'ai un soucis aléatoire depuis que j'utilise Material Design Lite avec Angularjs :

Bon :
Nom : Capture d’écran 2015-10-19 à 11.16.47.png Affichages : 143 Taille : 16,3 Ko

Mauvais :
Nom : Capture d’écran 2015-10-19 à 11.16.31.png Affichages : 154 Taille : 16,1 Ko

Il semble que parfois le CSS n'est pas chargé, mais le template de base Dashboard MDL fonctionne parfaitement ( sans script Angularjs)

Index.html
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
  <head>
  <meta charset="utf-8">
  <title>title</title>
 
  <!-- META TAG -->
 
  <link rel="stylesheet" href="styles/material.indigo-deep_purple.min.css"/>
  <link rel="stylesheet" href="styles/styles.css">
  <link rel="stylesheet" href="styles/autocomplete.css">
  <link rel="stylesheet" href="styles/ngDialog.min.css"/>
  <link rel="stylesheet" href="styles/ngDialog-theme-default.min.css"/>
  <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
  </head>
  <body ng-app="tdcWebappApp">
 
   <div ng-view=""></div>
   </div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/ngDialog/js/ngDialog.min.js"></script>
 
<script src="scripts/material.min.js"></script>
<script src="scripts/autocomplete.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/main.js"></script>
 
 </body>
</html>

signin.html :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header" >
 <main class=" mdl-layout__content mdl-color--grey-100 ">
  <form>
   <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
    <div class="mdl-tabs__tab-bar">
      <a href="#identity" class="mdl-tabs__tab is-active">Identité</a>
      <a href="#registration" class="mdl-tabs__tab" >Adhésion</a>
      <a href="#activities" class="mdl-tabs__tab">Activités</a>
      <a href="#payment" class="mdl-tabs__tab" ng-click="display()">Règlement</a>
    </div>
 
    <div class="mdl-tabs__panel is-active" id="identity">
     ...
    </div>
    ...
   </div>
  </form>
 </main>
</div>

Pouvez vous m'expliquer d'où peut venir l'erreur ?

Merci