2016-08-25 2 views
0

Ich brauche ein festes Element auf einer Seite und dann eine scrollbare Liste.ion-content in ion-content scroll-false scrollt nicht

Ich fügte einen Ionengehalt innerhalb des ersten Ionengehaltes hinzu. Aber es scrollt nicht.

<ion-view title="Bayonne" hide-back-button="true" id="page5" style="background-color:#1B463C;"> 
<ion-content scroll="true" padding="false" class="has-header"> 
    <div> 
     <img src="img/cQzLvAwuSqCLeyZHzhBd_map.png" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;"> 
    </div> 
    <div id="bayonne-button-bar1" class=" button-bar "> 
     <button id="bayonne-button1" style="border-radius:0px 0px 0px 0px;" class=" button button-assertive button-block buttonnomargin">Lieux</button> 
     <a ui-sref="circuits" id="bayonne-button2" style="border-radius:0px 0px 0px 0px;" class=" button button-dark button-block buttonnomargin">Circuits</a> 
    </div> 
    <ion-content id="contentInside"> 
      <ion-list id="bayonne-list2"> 
       <ion-item class="item-thumbnail-left " id="bayonne-list-item12" ui-sref="rempart"> 
        <img src="img/S6OgBxiMQdSttmcgQNFJ_old.png"> 
        <h2>Parc de la Poterne</h2> 
       </ion-item> 
       <ion-item class="item-thumbnail-left " id="bayonne-list-item11" ui-sref="rempart"> 
        <img src="img/0CoPf6OkTGWKNa0SUvI1_rempart.jpg"> 
        <h2>Parc de la Poterne</h2> 
       </ion-item> 
       <ion-item class="item-thumbnail-left item-icon-right " id="bayonne-list-item7"> 
        <img src="img/St3jeK3kRVC7bY3TODRt_tour.png"> 
        <h2>Château-Vieux</h2> 
        <i class="icon ion-android-walk"></i> 
       </ion-item> 
       <ion-item class="item-thumbnail-left " id="bayonne-list-item13"> 
        <img src="img/1E4YdOePR62V8ZoECOuL_cloitre.jpg"> 
        <h2>Cloître</h2> 
       </ion-item> 
       <ion-item class="item-thumbnail-left " id="bayonne-list-item5"> 
        <img src="img/sDFRnANETvaagk5B01nZ_bayonne_cathedrale_et_cloitre_03-05-2012___11.JPG"> 
        <h2>Cathédrale</h2> 
       </ion-item> 
       <ion-item class="item-thumbnail-left " id="bayonne-list-item6"> 
        <img src="img/n3OwTRCOTDSW1V7q2Z3R_reduit.jpg"> 
        <h2>Place du Réduit</h2> 
       </ion-item> 
       <ion-item class="item-thumbnail-left " id="bayonne-list-item14"> 
        <img src="img/qeuF4erGTQOtqvgTUOD1_escalier.jpg"> 
        <h2>Escaliers</h2> 
       </ion-item> 
      </ion-list> 

    </ion-content> 
</ion-content> 

Antwort

1

Sie keinen Ionengehalt in einem anderen Ionengehalt eine gute Praxis ist es nicht haben kann. Wenn ein Inhalt statisch sein soll, können Sie ion-header mit der Subheader-Klasse verwenden.

<ion-header class="bar bar-subheader"> 
<div> 
    <img src="img/cQzLvAwuSqCLeyZHzhBd_map.png" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;"> 
</div> 
<div id="bayonne-button-bar1" class=" button-bar "> 
    <button id="bayonne-button1" style="border-radius:0px 0px 0px 0px;" class=" button button-assertive button-block buttonnomargin">Lieux</button> 
    <a ui-sref="circuits" id="bayonne-button2" style="border-radius:0px 0px 0px 0px;" class=" button button-dark button-block buttonnomargin">Circuits</a> 
</div> 

nun das Bild und die Taste wird im Header statisch sein. HINWEIS: Es muss eine Has-Subheader-Klasse im Ionengehalt enthalten sein.

<ion-content class="has-subheader"> 
     "Your content goes here" 
</ion-content> 
+0

ok danke, aber wird die Subheaderleiste die richtige Höhe haben? Und der Inhalt unten, wird es an der richtigen Position von oben sein? – Louis

+0

Ya "has-subheader" ist eine vordefinierte Klasse in ionic. Wenn Sie unterschiedliche Höhe wünschen, können Sie es in Ihrer .css-Datei –

+0

überschreiben und was ist mit ist es nicht etwas für diesen Zweck gemacht? – Louis