离子条形头与离子含量重叠

时间:2014-12-09 13:11:44

标签: javascript html css angularjs ionic-framework

我正在尝试添加bar-header和form-input。但是没有出现用户名表单,可能是因为它与bar-header重叠。我在离子内容中添加了class =“has-header”但是这不起作用,用户名表单和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>

1 个答案:

答案 0 :(得分:1)

问题是你不会自己创建角度应用程序。

只需添加一个空应用:

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

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


    });

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