Ionic subheader bar überlappender Inhalt
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:
4 Antworten
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