Adding elements before ion-content


Ise there a way that I could add some content in a view before ion-content.
For example:

    <div> something here </div>

in this example contents of the div element are not displayed at all.


What is your intention for that?

You can set the ion-content to scroll="false"
add some fixed content and add a new ion-scroll in the ion-content which is scrollable?

   <ion-content scroll="false">
       <div>HALLO HIHIHI</div>
           // they see me scrollin' ... they hatin'


I want to have a static search field on top of the ion-content and then in the ion-content to have a collection repeat.
The reason the element has to be outside ion-content is that collection repeat needs to take the whole of ion-content and I cannot add elements on top or bottom of it.


    <div> <input ng-model="search" type="search" /> </div>
         <div collection-repeat="item in items | filter: search" 


You can use a sub-header like this:


In this specific case I cant since sub-header already contains the tabs


All the subheader is doing is positioning a div absolutely and then adding top to the ion-content. You can create your own div that does this or piggyback off the bar-subheader class and tweak it. The problem is you need to know the height of the headers/subheaders above it. See this:


ähm you can put a collection repeat in an ion-scroll… it should use the ion-scroll container height to calculate visible collection-repeat-items.


Every time I wrap a collection-repeat in an ion-scroll the list disappears. Can you show how you do it?


have to set an explicit height to the ion-scroll:


Nice solution. :slight_smile: You’ll also need to add class="has-tabs" to the ion-scroll to prevent the last item being cut off.


yep, you are right… i only hacked it together^^, that you have a working example.


Cheers guys, thank you so much for this


I found out that in some cases where the repeated items are not list items using has-tabs will set the wrong offset to the content.
Its better if you just set the height of the ion-scroll to height: calc(100% - XXXpx) where XXX is the height of the elements you want to include above the ion-scroll.


hey, like i answered… i hacked it together to show that it is working ;).
So i know you have to consider your offsets. If you are using tabs or other ionic-components there are already classes to solve the problem. (see the answer of brandyshea for tabs you can use the has-tabs class)


So now something much more challenging…can we add content after the user has scrolled to the end of the list?

for example I need to add a “click here” button when the user cant find what he is looking for


Put the content at the end of the list?

Or use this:

there you have a function which is called, when reaching the bottom or near the bottom… with the ng-if you should remove the element from the dom, if your function is done


You saved me! Thanks :smile: :smile: