Ionic bar-header與離子內容重疊

我試圖添加bar-header和表單輸入。但是用戶名錶單沒有出現，可能是因爲它與條形標題重疊。我在離子內容中添加了class =「has-header」，但這不起作用，用戶名錶單和條形標題仍然相互重疊。誰能幫我嗎？Ionic bar-header與離子內容重疊

這是我的代碼：

<!DOCTYPE html> 
<html ng-app="myApp"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 
    <script src="js/controllers.js"></script> 
    <script src="js/services.js"></script> 
    </head> 
    <body> 
    <div class="bar bar-header bar-calm"> 
       <h1 class="title">bar-calm</h1> 
    </div> 
    <ion-content class="has-header"> 
    <div class="list">   
     <label class="item item-input"> 
      <span class="input-label">Username</span> 
      <input type="text"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Password</span> 
      <input type="password"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Username</span> 
      <input type="text"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Password</span> 
      <input type="password"> 
     </label> 
    </div> 
    </ion-content> 
    <div class="bar bar-footer bar-calm"> 
     <div class="title">Footer</div> 
    </div>`enter code here` 
    </body> 
</html>

來源

2014-12-09 Jais Anasrulloh Ja' fari

你可以創建一個[Codepen（http://codepen.io/）嗎？我在那裏添加了你的代碼，並且頭部不與表單重疊。 – denisazevedo 2014-12-09 13:27:15

它是重疊的兄弟，雖然我使用codepen，在這裏http://codepen.io/anon/pen/ZYQqpO – 2014-12-09 13:47:48

的問題是，你沒有創建角應用程序本身。

只需添加一個空的應用程序：

angular.module('myApp', ['ionic']) 

    .controller('MapCtrl', function($scope) { 


    });

http://codepen.io/anon/pen/ZYQqoe

來源

2014-12-09 14:39:24 Rasalom

Ionic bar-header與離子內容重疊

回答

相關問題