Multiple ion-content areas

1

I’m trying to build a view with two buttons on top that can’t scroll, and a content area below those buttons that does scroll. Both ion-content areas will overlap eachother, can I only use one ion-content item per view?

<ion-view title="Overzicht" ng-controller="OverzichtController" hide-nav-bar="true">

  <ion-content scroll="false">
    <div class="button-bar">
        <a class="button button-light" ng-click="scanStamps()">first</a>
        <a class="button button-light">second</a>
    </div>
  </ion-content>

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

</ion-view>

2

Why use an ion-content for the two buttons on top? You could use a sub header

3

I’m interesting in the same topic, though in my case, I can’t use the header because it’s too small, the upper ion-content has a whole html into it.

So is it possible for two ion-content not to overlap each other ?

4

They are positioned absolute, so you would just need to use some css to position thing correctly.

1 Like
5

Hi, I also have the need to use multiple ion-contents in the same view. i.e.

<ion-view title="Dashboard">
  <ion-content class="has-header" >
    <div class="row responsive-lg" id="dashboard-row">
         <div class="col" ui-view="welcome"> </div>
         <div class="col" ui-view="set"></div>  
    </div>
</ion-content>
</ion-view>

I load two different pages into welcome and set views. If I use ion-content then the views overlap each other. If I remove the ion-content form the views I’m loading it works correctly, but the formatting seems off. Can’t ion-content be used for multiple views in the same page? If so is there an alternative?

1 Like