android - documento - Contenido oculto por título y pestañas en Ionic
ion-title ionic 3 (1)
Conocí este problema antes cuando probé Ionic la primera vez. Perder mucho tiempo para resolver esto. Parte de su contenido principal se superpondrá porque la prioridad de las fichas de iones es mayor que el contenido de la parte posterior.
Puse el pie de página fuera de la etiqueta <ion-content> . Coloqué algunas clases como has-tabs-top y has-footer .
Prueba esto y avísame si te puede ayudar. 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>
Tengo una página de índice que contiene 3 pestañas. El problema ocurre en todas las pestañas, pero lo mostraré aquí con la página de Inicio. El problema que está ocurriendo es que parte del contenido principal de la página de inicio se solapa con la barra de título y la barra de pestañas, por lo que se oculta.
Dentro de la página Home html intenté envolver el código con contenido de iones (ver código a continuación), pero esto oculta el contenido superior, reduce la altura y ya no es pantalla completa, además de las diapositivas que tengo que deslizar sobre el contenido porque si toco algo del margen o espacio de margen ya no se deslizará más (la diapositiva 3 es un buen ejemplo ya que no tiene mucho contenido, debe presionar y deslizar sobre el texto para deslizar). Si elimino las etiquetas de contenido iónico, esto ajusta la altura correctamente, hace que el deslizamiento funcione para que no tenga que pasar el contenido para que funcione, pero el problema del contenido superior se superpone con las pestañas y la barra de título aún existe ¿Cómo puedo adaptar home.html perfectamente debajo de las pestañas y utilizar todo el espacio?
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>
Con contenido de iones. La casilla de verificación superior está oculta, el pie de página no está en la parte inferior y deslizar solo funciona si sostengo y deslizo el contenido sobre el espacio en blanco.
Si elimino el contenido de iones. El pie de página va hacia abajo, puedo deslizarme en cualquier lugar del blanco y se deslizará, pero la casilla de verificación aún está oculta por la barra de título y las pestañas.
