内容被Ionic中的标题和标签隐藏

I have an index page which contains 3 tabs. The problem occurs within all tabs, but I will show here with the Home page. The problem that is occurring is that the some of the top content of the Home page is being overlapped by the title bar and the tabs bar so it is being hidden.

我有一个索引页面,其中包含3个选项卡。问题出现在所有选项卡中,但我将在此处显示主页。发生的问题是主页的一些*内容被标题栏和标签栏重叠,因此它被隐藏。

Inside of the Home html page I tried to wrap the code under with ion-content (see code below), but this hides the top content, squishes the height and it is no longer full screen, plus for the slides I have to swipe over the content because if I touch some of the padding or margin space it will not swipe anymore (slide 3 is a good example since it does not have a lot of content, you must press and swipe over the text for it to swipe). If I remove the ion-content tags, this adjusts the height properly, makes the swipe work so I don't have to swipe over content for it to work, but the problem of the top content being overlapped by the tabs and title bar still exists. How can I fit the home.html perfectly under the tabs and to utilize all the space?

在Home html页面的内部,我尝试使用ion-content包装代码(请参阅下面的代码),但是这会隐藏顶部内容,调整高度并且不再是全屏,加上幻灯片我必须刷过内容因为如果我触摸一些填充或边距空间它将不再滑动(幻灯片3是一个很好的例子,因为它没有很多内容,你必须按下并轻扫文本才能刷卡)。如果我删除了离子内容标签,这会正确调整高度,使滑动工作,所以我不必滑动内容使其工作,但顶部内容的问题仍然被标签和标题栏重叠存在。如何将home.html完美地放在标签下并利用所有空间?

Index.html

<!DOCTYPE html>
<html>
  <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">
    -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- ngCordova install script needed -->
    <script src="lib/ngCordova/dist/ng-cordova.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>
  </head>
  <body ng-app="mobileApp">


  <script id="tabs.html" type="text/ng-template">
    <ion-tabs class="tabs-icon-top tabs-positive">

      <ion-tab icon="ion-home-outline"  ui-sref="tabs.Home">
        <ion-nav-view name="Home-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab icon="ion-info-outline" ui-sref="tabs.Info">
        <ion-nav-view name="Info-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab icon="ion-system-outline" ui-sref="tabs.System">
        <ion-nav-view name="System-tab"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
  </script>

  <ion-nav-bar align-title="center" class="nav-title-slide-ios7 bar-calm">
    <ion-nav-back-button class="button-icon ion-arrow-left-c">
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-nav-view>
    <ion-view  hide-back-button="true">
      <ion-nav-title>
        <h1>TitleHere</h1>
      </ion-nav-title>
    </ion-view>
  </ion-nav-view>

  </body>
</html>

home.html

<ion-content>
        <div class="item item-checkbox">
            Checkbox Label
            <label class="checkbox">
                <input type="checkbox">
            </label>
        </div>

        <ion-slide-box>
            <ion-slide>
                <h3>Thank you for choosing the Awesome App!</h3>
                <div id="logo">
                    <img src="http://code.ionicframework.com/assets/img/app_icon.png">
                </div>
                <p>
                    We've worked super hard to make you happy.
                </p>
                <p>
                    But if you are angry, too bad.
                </p>
            </ion-slide>
            <ion-slide>
                <h3>Using Awesome</h3>

                <div id="list">
                    <h5>Just three steps:</h5>
                    <ol>
                        <li>Be awesome</li>
                        <li>Stay awesome</li>
                        <li>There is no step 3</li>
                    </ol>
                </div>
            </ion-slide>
            <ion-slide>
                <h3>Any questions?</h3>
                <p>
                    Too bad!
                </p>
            </ion-slide>
        </ion-slide-box>

 <div class="bar bar-footer bar-balanced" >
   <div class="title">Footer</div>
 </div>
</ion-content>

With ion-content. The top checkbox is hidden, the footer is not on the bottom and swiping only works if I hold and swipe over content not over white space.

含离子含量。顶部的复选框是隐藏的,页脚不在底部,只有在我按住并滑过内容而不是在空白区域时才滑动。

If I remove ion-content. The footer goes to the bottom, I can swipe anywhere in the white and it will swipe, but the checkbox is still hidden by the title bar and the tabs.

如果我去除离子含量。页脚移到底部,我可以在白色的任何地方滑动它会滑动,但复选框仍然被标题栏和标签隐藏。

1 个解决方案

#1

I met this problem before when I tried Ionic in the first time. Having wasting a lot of time to solve this. Some of your top content will be overlapped because the ion-tabs priority is higher than the content in the back.

我在第一次尝试Ionic之前遇到了这个问题。浪费了很多时间来解决这个问题。您的一些热门内容将重叠,因为离子标签优先级高于后面的内容。

I put the footer outside the <ion-content> tag. I placed some class such as has-tabs-top and has-footer.

我把页脚放在标签之外。我放置了一些类,如has-tabs-top和has-footer。

Try this and let me know if it can helps you. http://codepen.io/nampdn/pen/qOKNNv

试试这个,让我知道它是否可以帮助你。 http://codepen.io/nampdn/pen/qOKNNv

HTML

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Tabs Example</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body>

  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-nav-view></ion-nav-view>


  <script id="templates/tabs.html" type="text/ng-template">
    <ion-tabs class="tabs-icon-top tabs-top tabs-positive">

      <ion-tab title="Home" icon="ion-home" href="#/tab/home">
        <ion-nav-view name="home-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
        <ion-nav-view name="about-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
        <ion-nav-view name="contact-tab"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
  </script>

  <script id="templates/home.html" type="text/ng-template">
    <ion-view view-title="Home">
      <ion-content class="has-tabs-top has-footer" scroll="false">
        <div class="item item-checkbox">
          Checkbox Label
          <label class="checkbox">
            <input type="checkbox">
          </label>
        </div>
        <ion-slide-box>
          <ion-slide>
            <h3>Thank you for choosing the Awesome App!</h3>
            <div id="logo">
              <img src="http://code.ionicframework.com/assets/img/app_icon.png">
            </div>
            <p>
              We've worked super hard to make you happy.
            </p>
            <p>
              But if you are angry, too bad.
            </p>
          </ion-slide>
          <ion-slide>
            <h3>Using Awesome</h3>

            <div id="list">
              <h5>Just three steps:</h5>
              <ol>
                <li>Be awesome</li>
                <li>Stay awesome</li>
                <li>There is no step 3</li>
              </ol>
            </div>
          </ion-slide>
          <ion-slide>
            <h3>Any questions?</h3>
            <p>
              Too bad!
            </p>
          </ion-slide>
        </ion-slide-box>


      </ion-content>
      <div class="bar bar-footer bar-balanced">
        <div class="title">Footer</div>
      </div>
    </ion-view>
  </script>

  <script id="templates/facts.html" type="text/ng-template">
    <ion-view view-title="Facts">
      <ion-content class="padding">
        <p>Banging your head against a wall uses 150 calories an hour.</p>
        <p>Dogs have four toes on their hind feet, and five on their front feet.</p>
        <p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
        <p>A cockroach will live nine days without it's head, before it starves to death.</p>
        <p>Polar bears are left handed.</p>
        <p>
          <a class="button icon ion-home" href="#/tab/home"> Home</a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/facts2.html" type="text/ng-template">
    <ion-view view-title="Also Factual">
      <ion-content class="padding">
        <p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>
        <p>1 in every 4 Americans has appeared on T.V.</p>
        <p>11% of the world is left-handed.</p>
        <p>1 in 8 Americans has worked at a McDonalds restaurant.</p>
        <p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>
        <p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>
        <p>
          <a class="button icon ion-home" href="#/tab/home"> Home</a>
          <a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/about.html" type="text/ng-template">
    <ion-view view-title="About">
      <ion-content class="padding">
        <h3>Create hybrid mobile apps with the web technologies you love.</h3>
        <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
        <p>Built with Sass and optimized for AngularJS.</p>
        <p>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/nav-stack.html" type="text/ng-template">
    <ion-view view-title="Tab Nav Stack">
      <ion-content class="padding">
        <p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/contact.html" type="text/ng-template">
    <ion-view title="Contact">
      <ion-content>
        <div class="list">
          <div class="item">
            @IonicFramework
          </div>
          <div class="item">
            @DriftyTeam
          </div>
        </div>
      </ion-content>
    </ion-view>
  </script>

</body>

</html>

#1