Onsen Artikel Liste am unteren Rand des Bildschirms

Question

Ich verwende Onsen Rahmen für die Entwicklung einer mobilen App. Ich versuche, ein unteres Menü hinzuzufügen, aber es funktioniert nicht. Ich habe versucht, den Code zu verwenden, die ich von here und here:

<ons-bottom-toolbar class="bottom-toolbar"> 
    <ons-list> 
     <ons-list-item modifier="tappable"> 
     ciao 
     </ons-list-item> 
     <ons-list-item modifier="tappable"> 
     ciao 
     </ons-list-item> 
    </ons-list> 
    </ons-bottom-toolbar> 

Aber das Ergebnis ist seltsam:

Wissen Sie, was das Problem sein könnte?

Answer 1

Die untere Symbolleiste war nicht für eine ganze Liste von Elementen gedacht, sondern nur für eine Zeile. Es soll immer sichtbar sein, damit es nicht zu groß wird.

Wenn Sie nur die Elemente auf der Unterseite haben wollen, wird es mit einem kleinen CSS einfacher sein.

.bottom { 
    position: absolute; 
    left:0; 
    right:0; 
    bottom:0; 
} 

Demo