Ionic subheader bar überlappender Inhalt

8

In einer Ansicht mit Header und Subheader überlappt der Inhalt der Subheader den Inhalt der Ansicht.

  • Kopfzeile im Folienmenü

               

    %Vor%

  • Subheader in einer Ansicht

    <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>

Dvis-Tasten im Subheader-Überlappungsinhalt, h2 zeigt 100% an. Etwas fehlt in diesem Code? Danke

[BEARBEITEN] Schreiben Sie den Code neu, um meinen Bedürfnissen gerecht zu werden: Unterkopf kleiner als die Kopfzeile mit zwei Links in den Ecken und einem Titel.

%Vor%

Fügen Sie diese CSS hinzu:

%Vor%

Gerade Schaltflächen entsprechen nicht dem Untertiteltitel. Irgendwelche Ideen?

Neuer Status:

    
dblanco 26.03.2015, 18:14
quelle

4 Antworten

18

Stellen Sie sicher, dass die Inhaltsansicht weiß, dass Platz für die Unterheader vorhanden sein muss, indem Sie die CSS-Klasse has-subheader :

hinzufügen %Vor%

Siehe Ссылка

    
dakna 26.03.2015 18:55
quelle
1

Wenn Sie in Android auf dieses Problem stoßen, verwenden Sie das folgende

%Vor%

Ссылка

    
Amr ElAdawy 30.11.2015 10:50
quelle
0

Sie können die Höhe des Subheaders, der Fußzeile und des Unterfußes leicht ändern, wenn Sie SASS mit Ionic verwenden. Wenn Sie einen 70px großen Subheader haben möchten, fügen Sie einfach $bar-subheader-height: 70px; zu Ihrer ionic.app.scss Datei hinzu. Ihre scss-Datei sollte etwa wie folgt aussehen:

%Vor%

Sieh dir die www/lib/ionic/scss/_variables.scss -Datei für einige andere Dinge an, die du leicht ändern kannst.

Hier sind Anweisungen zum Einrichten von Sass mit ionic und hier ist ein schnelles Tutorial .

    
Jon 27.07.2015 22:29
quelle
0

Sie können has-header oder has-subheader class zu Ihrem Hauptinhalt in der ion-content-Direktive hinzufügen.

Hier ist mein Code:

%Vor%

<div class="list has-header"> Ich füge die Klasse has-header meiner Liste hinzu, um eine Überlappung der Unterüberschriften zu vermeiden.

    
feyyaz 22.11.2016 14:51
quelle