ion-content inside ion-content scroll-false doesn't scroll

Question

I need to have a fixed element on a page, and then a scrollable list.

I added a ion-content inside the first ion-content. But it doesn't scroll.

<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>

Mathavan Ramakrishnan Mathavan Ramakrishnan · Accepted Answer · 2016-08-26T07:28:16

You cannot have a ion-content inside another ion-content it's not a good practice. If you want a content to be static you can use ion-header with subheader class.

<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>

Now the image and button will be static in the header. NOTE: It is must to include has-subheader class in ion-content.

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

ion-content inside ion-content scroll-false doesn't scroll

1 Answers