Wie bekomme ich dynamische Größe Kopf-/Fußzeilen in ionischen?

Ich hatte ein wenig Erfolg mit dem Ionic-Framework, aber ich habe ein Problem mit der Kopf-/Fußzeile Formatierung in einer Registerkartenansicht getroffen. Insbesondere muss ich mehr als eine einzelne Zeile in der Kopf- oder Fußzeile rendern - ich muss wirklich eine Folie hineinstecken und etwas Text. Was ich gefunden habe, ist, dass anstelle der Kopf-/Fußzeile, die eine dynamische Größe ist, die auf dem enthaltenen Inhalt basiert, ich festgestellt habe, dass der zugewiesene Platz für jeden fest ist. Mit diesem Auszug aus der Tab-Ansicht, sehe ich sowohl der Kopf- und Fußzeile Inhalt abgeschnitten wird:Wie bekomme ich dynamische Größe Kopf-/Fußzeilen in ionischen?

<ion-view title="Bug tab"> 
 
    <ion-header-bar align-title="left" class="bar-positive"> 
 
    <h1 class="title">Header!</h1> 
 
    <h2>more header</h2> 
 
    <h2>more header</h2> 
 
    </ion-header-bar> 
 
    <ion-content has-header="true"> 
 
    <h2>Content<h2> 
 
    </ion-content> 
 
    <ion-footer-bar class="bar-subfooter" class="bar-assertive"> 
 
    <h1 class="title">Subfooter</h1> 
 
    <h2>more subfooter</h2> 
 
    <h2>more subfooter</h2> 
 
    </ion-footer-bar> 
 
    <ion-footer-bar align-title="left" class="bar-assertive"> 
 
    <h1 class="title">Footer</h1> 
 
    <h2>more footer</h2> 
 
    <h2>more footer</h2> 
 
    </ion-footer-bar> 
 
</ion-view>

Gibt es eine Möglichkeit, um dieses Problem? Gibt es eine Möglichkeit, eine feste, aber dynamisch große Kopf-/Fußbereich zu bekommen und den Rest des Inhalts in der Mitte scrollbar zu haben?

(I am ionischen Rahmen fragen würde, aber die Website lehnt die Anmeldungs mit ‚unbekannter Fehler‘ konsequent.

Quelle

2014-10-30 user1775230

Höhe von Kopf-/Fußzeilen durch ionische CSS auf .bar und .bar-footer-Klassen festgelegt ist, . bzw.

Was können Sie tun, ist:

a) Überschreiben Sie die .bar CSS-Klasse die gewünschte Höhe einstellen:

.bar{height: 80px; }

b) Verwendung Inline-Styles, die Höhe einzustellen dort:

<ion-header-bar align-title="left" class="bar-positive" style="height: 80px;">

Wie dem auch sei, ich denke, dass beide Optionen (feste Höhen) sind der richtige Weg, weil man sonst kann den Inhalt oder den Unterfuß nicht korrekt positionieren.

Hier ist ein Code-Snippet mit festen Höhen (achten Sie auf "oben" und "unten" CSS-Eigenschaften, um neue Balkenhöhen zu entsprechen).

angular.module('starter', ['ionic'])

.bar{ 
 
    height: 80px !important; 
 
} 
 

 
.has-header{ 
 
\t top: 80px !important; 
 
\t bottom: 160px !important; 
 
} 
 

 
.bar-footer{ 
 
\t height: 100px !important; 
 
} 
 

 
.bar-subfooter{ 
 
\t bottom: 100px !important; 
 
\t height: 60px !important; 
 
}

<link href="http://code.ionicframework.com/1.1.1/css/ionic.min.css" rel="stylesheet"> 
 

 
<script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js"></script> 
 

 

 

 
<body ng-app="starter"> 
 

 
<ion-view title="Bug tab"> 
 
    
 
    <ion-header-bar align-title="left" class="bar-positive"> 
 
    <h1 class="title">Header!</h1> 
 
    <h2>more header</h2> 
 
    <h2>more header</h2> 
 
    </ion-header-bar> 
 

 
    <ion-content has-header="true"> 
 
    <h2>Content</h2> 
 
    </ion-content> 
 

 
    <ion-footer-bar class="bar-subfooter" class="bar-assertive"> 
 
    <h1 class="title">Subfooter</h1> 
 
    <h2>more subfooter</h2> 
 
    <h2>more subfooter</h2> 
 
    </ion-footer-bar> 
 

 
    <ion-footer-bar align-title="left" class="bar-assertive"> 
 
    <h1 class="title">Footer</h1> 
 
    <h2>more footer</h2> 
 
    <h2>more footer</h2> 
 
    </ion-footer-bar> 
 
</ion-view> 
 
    
 
</body>

Wenn Sie die Höhe wollen dynamisch, können Sie auf den Inhalt erweitern Basis verwenden, um die min-Gehalt Höhe Eigenschaft, obwohl in diesem Fall, da Sie nicht Wenn Sie die Höhe von Kopfzeile, Fußzeile und Unterfuß kennen, können Sie nicht das richtige CSS für die obere und untere Position für die absoluten divs festlegen (content und subfooter), so dass ein Teil dieser divs von der Kopf- und Fußzeilenelemente.

überprüfen Sie den Unterschied im folgenden Ausschnitt:

angular.module('starter', ['ionic'])

.bar{ 
 
\t height: -moz-min-content !important; 
 
    \t height: -webkit-min-content !important; 
 
    \t height: min-content !important; 
 
}

<link href="http://code.ionicframework.com/1.1.1/css/ionic.min.css" rel="stylesheet"> 
 

 
<script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js"></script> 
 

 

 

 
<body ng-app="starter"> 
 

 
<ion-view title="Bug tab"> 
 
    
 
    <ion-header-bar align-title="left" class="bar-positive"> 
 
    <h1 class="title">Header!</h1> 
 
    <h2>more header</h2> 
 
    <h2>more header</h2> 
 
    </ion-header-bar> 
 

 
    <ion-content has-header="true"> 
 
    <h2>Content</h2> 
 
    </ion-content> 
 

 
    <ion-footer-bar class="bar-subfooter" class="bar-assertive"> 
 
    <h1 class="title">Subfooter</h1> 
 
    <h2>more subfooter</h2> 
 
    <h2>more subfooter</h2> 
 
    </ion-footer-bar> 
 

 
    <ion-footer-bar align-title="left" class="bar-assertive"> 
 
    <h1 class="title">Footer</h1> 
 
    <h2>more footer</h2> 
 
    <h2>more footer</h2> 
 
    </ion-footer-bar> 
 
</ion-view> 
 
    
 
</body>

Quelle

2015-12-11 19:29:15

Ich bin sehr spät zu dieser Diskussion, aber ich war in der Lage Höhe verwendet werden: auto auf meiner Ion-footer-Bar sich in jede Höhe zu bewegen, basierend auf dem Inhalt. Hoffe, das hilft jemandem.

HTML:

<ion-footer-bar keyboard-attach class="item-input-inset bar-detail dynamic-height" ...

CSS:

.dynamic-height { 
    height: auto; 
}

Quelle

2016-05-22 23:57:49 djohnsonkc

Danke, das war genial ... – IonicBurger

Wie bekomme ich dynamische Größe Kopf-/Fußzeilen in ionischen?

Antwort

Verwandte Themen