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:
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:
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 .
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.
Tags und Links html angularjs css ionic-framework