Javascript 离子内容与离子标题栏重叠_Javascript_Html_Css_Cordova_Ionic Framework

Javascript 离子内容与离子标题栏重叠

javascript html css cordova ionic-framework

Javascript 离子内容与离子标题栏重叠,javascript,html,css,cordova,ionic-framework,Javascript,Html,Css,Cordova,Ionic Framework,我正在基于ionic框架构建phonegap应用程序。在一个html页面中，我需要一个标题和一个内容。但是标题与内容重叠。很抱歉，我没有足够的声誉来发布这张图片代码如下。html页面与lib文件夹位于同一文件夹中，其中包含ionic css和js文件夹 <html> <head> <meta charset="utf-8"> <title>Weather</title> <!-- Set

我正在基于ionic框架构建phonegap应用程序。在一个html页面中，我需要一个标题和一个内容。但是标题与内容重叠。很抱歉，我没有足够的声誉来发布这张图片

代码如下。html页面与lib文件夹位于同一文件夹中，其中包含ionic css和js文件夹

    <html>
    <head>
    <meta charset="utf-8">
    <title>Weather</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="lib/css/ionic.css">

    <script src="lib/js/ionic.bundle.js"></script>
    <script src="lib/js/angular/angular-resource.js"></script>
    </head>
    <body>
        <ion-header-bar class="bar bar-header bar-dark">
          <h1 class="title">Settings</h1>
          <button class="button button-clear" ng-click="closeSettings()">Close</button>
        </ion-header-bar>
        <ion-content has-header="true">
          <div class="padding">
            <div class="list">
              <label class="item item-input">
                <span class="input-label">Units</span>

                <ion-radio-buttons ng-model="settings.tempUnits">
                  <button class="button button-positive button-radio" ng-value="'f'">&deg;F</button>
                  <button class="button button-positive button-radio" ng-value="'c'">&deg;C</button>
                </ion-radio-buttons>
              </label>
            </div>
          </div>
        </ion-content>

    <!-- <ion-pane id="wrapper"> -->
<!--        <ion-header-bar class="bar bar-header bar-dark">
            <button class="button icon-left ion-chevron-left button-clear button-dark" onclick="goBack()">Back</button>
            <div class="title">xxx</div>
            <button class="button button-icon icon ion-navicon"></button>
        </ion-header-bar>
    </body>
</html>


天气
设置
接近
单位
&度；F
&度；C
见：
将class=“has header”指定给ion内容
<ion-content class="has-header">
</ion-content>



您需要初始化angular应用程序-请参见我的示例中的javascript。注意ng控制器和ng应用程序。
您可以尝试这样设置“has subheader”类
    <ion-content class='has-header has-subheader'>
    ...
    </ion-content>


...

请参阅：

网络游戏
手机游戏
来到这里时，爱奥尼亚2也有同样的问题：导航栏内容重叠。就我而言，这是因为我对离子含量有一个*ngIf。解决方案是将*ngIf移动到内部元素中，例如ng容器（感谢@TwitchBronBron）：

...
...
在我的例子中，first on有一个*ngIf，其中包含基于用户角色的数据，用户登录后我会得到这些数据。我在登录后没有显示此项目。首次登录后，当数据存储在存储器中时，该项将显示。具有标题和任何css类和属性，在ionic中不起作用。
您可以尝试在顶部填充
<ion-content padding-top>
<ion-grid padding-top>
  <ion-row padding-top>
    <ion-col padding-top>

        <ion-card class="foodCard">
          <img src="#">

            <ion-card-header>
              <ion-card-title>Card Title</ion-card-title>
            </ion-card-header>

            <ion-card-content>
              Keep close to Nature's heart... and break clear away, once in awhile,
              and climb a mountain.
            </ion-card-content>

          </ion-card> 

    </ion-col>
  </ion-row>
</ion-grid>


卡片标题
贴近大自然的心。。。时不时地离开，
爬山。

谢谢。“但它们仍然重叠。”程成培尝试我的新答案。谢谢。但它们仍然重叠。@ChengchengPei查看我发布的链接。谢谢。现在可以了。我使用您提供的javascript初始化html页面，现在它可以工作了。谢谢你的帮助。谢谢你，这是我的问题！知道这是否会导致页脚导航栏执行相同操作时出现问题吗？如果不想添加新元素，也可以使用…
<ion-header>
  <ion-navbar>
    <ion-title>
      ...
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ng-container *ngIf="...">...</ng-container>
</ion-content>

<ion-content padding-top>
<ion-grid padding-top>
  <ion-row padding-top>
    <ion-col padding-top>

        <ion-card class="foodCard">
          <img src="#">

            <ion-card-header>
              <ion-card-title>Card Title</ion-card-title>
            </ion-card-header>

            <ion-card-content>
              Keep close to Nature's heart... and break clear away, once in awhile,
              and climb a mountain.
            </ion-card-content>

          </ion-card> 

    </ion-col>
  </ion-row>
</ion-grid>