Adding elements before ion-content

1

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

<ion-view>
    <div> something here </div>
    <ion-content>....</ion-content>
</ion-view>

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

2

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-view>
   <ion-content scroll="false">
       <div>HALLO HIHIHI</div>
       <ion-scroll>
           // they see me scrollin' ... they hatin'
       </ion-scroll>
   </ion-content>
</ion-view>
2 Likes
3

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.

example:

<ion-view>
    <div> <input ng-model="search" type="search" /> </div>
    <ion-content>
         <div collection-repeat="item in items | filter: search" 
           collection-item-width="'100%'"
           collection-item-height="79"
         >{{ item.name}}</div>
    </ion-content>
</ion-view>
4

You can use a sub-header like this: http://codepen.io/anon/pen/DLuEc?editors=001

5

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

6

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: http://codepen.io/anon/pen/pvaoXe?editors=110

7

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

8

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

9

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

1 Like
10

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.

11

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

12

Cheers guys, thank you so much for this

13

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.

14

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)

15

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

16

Put the content at the end of the list?

Or use this:
http://ionicframework.com/docs/api/directive/ionInfiniteScroll/

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

17

You saved me! Thanks :smile: :smile: