web-dev-qa-db-fra.com

Contenu superposé de la barre de sous-en-tête ionique

Dans une vue avec en-tête et sous-en-tête, le contenu du sous-en-tête chevauche le contenu de la vue.

  • En-tête dans le menu des diapositives

      <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left" ng-hide="$exposeAside.active"></button>
  </ion-nav-buttons>
</ion-nav-bar>

<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>

  • Sous en-tête dans une vue

    <ion-header-bar align-title="center" class="bar bar-subheader custom bar-energized" ng-if="datos.subTitulo"> <div class="buttons"> <a class="ion-chevron-left" href="#/app/ranking/ubicacion/{{datos.divAnt}}" ng-if="datos.divAnt"></a> </div> <h2 class="subtitle">{{datos.subTitulo}}</h2> <div class="buttons"> <a class="ion-chevron-right" href="#/app/ranking/ubicacion/{{datos.divSig}}" ng-if="datos.divSig"></a> </div> </ion-header-bar>

Les boutons Dvis dans le sous-en-tête recouvrant le contenu, h2 indiquent 100%. Il manque quelque chose dans ce code? Merci

image view

[EDIT] Réécrivez le code en fonction de mes besoins: sous-en-tête plus petit que l'en-tête avec deux liens dans les coins et un titre.

<ion-header-bar align-title="center" class="bar-subheader subheader_custom bar-energized">
    <div class="button button-clear"> 
        <a class="icon ion-ios-arrow-back blanco" href="#/app/ranking/ubicacion/{{datos.divAnt}}" ng-if="datos.divAnt"></a>
    </div>
    <div class="h2 title title_custom">{{datos.subTitulo}}</div>
    <div class="button button-clear"> 
        <a class="icon ion-ios-arrow-forward blanco" href="#/app/ranking/ubicacion/{{datos.divSig}}" ng-if="datos.divSig"></a>
    </div>
</ion-header-bar>

Ajouter ce css:

.has-subheader {
    top: 70px;
}

.bar-subheader.subheader_custom {
    display: block;
    height: 26px;
    top: 44px;
}
.title.title_custom {
    font-size: 16px;
    font-weight: 300;
    height: 20px;
    left: 0;
    line-height: 20px;
    margin: 2px 10px 2px 10px;
    min-width: 24px;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-align: center;
    text-overflow: Ellipsis;
    top: 0;
    white-space: nowrap;
    z-index: 0;
}

Même les boutons ne sont pas en ligne avec le titre du sous-titre. Des idées?

Nouveau statut: enter image description here

htmlcssangularjsionic-framework
8
dblanco

Assurez-vous que la vue du contenu sait qu'elle doit laisser de l'espace pour les sous-en-têtes en ajoutant la classe CSS has-subheader: 

<ion-content class="has-header has-subheader">
</ion-content>

Voir http://ionicframework.com/docs/components/#subheader

18
dakna

Si vous faites face à ce problème dans Android, utilisez les méthodes suivantes 

.platform-Android .bar-subheader  {
		top: 93px;
}

https://forum.ionicframework.com/t/sub-header-not-showing-on-Android-with-tabs/15341/18

1
Amr ElAdawy

Vous pouvez ajouter has-header ou has-subheader class à votre contenu principal dans la directive ion-content.

Voici mon code: 

<ion-view view-title="View Title">
  <ion-content>
    <div class="bar bar-header">
      <h2 class="title">Sub Header</h2>
    </div>
    <div class="list has-header">
        <a class="item item-icon-left" href="#">
            <i class="icon ion-email"></i>
            Check mail
        </a>
        <a class="item item-icon-left item-icon-right" href="#">
            <i class="icon ion-chatbubble-working"></i>
            Call Ma
            <i class="icon ion-ios-telephone-outline"></i>
        </a>
    </div>
  </ion-content>
</ion-view>

<div class="list has-header"> J'ajoute la classe has-header à ma liste pour éviter le chevauchement des en-têtes

0
feyyaz

Vous pouvez facilement modifier la hauteur du sous-en-tête, du pied de page et du sous-lanceur si vous utilisez SASS avec Ionic. Si vous voulez un sous-en-tête de 70 pixels de haut, ajoutez simplement $bar-subheader-height: 70px; à votre fichier ionic.app.scss. Votre fichier scss devrait ressembler à ceci:

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

$bar-subheader-height: 70px;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

Consultez le fichier www/lib/ionic/scss/_variables.scss pour connaître certaines autres choses que vous pouvez modifier facilement.

Voici instructions pour configurer sass avec ionic et voici un tutoriel rapide .

0
Jon