# Adding elements before ion-content

**URL:** <https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478>\
**Category:** uncategorized\
**Created:** [February 12, 2015, 1:09am UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478 "2015-02-12T01:09:43Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![paishin](https://avatars.discourse-cdn.com/v4/letter/p/b487fb/32.png) [@paishin](https://forum.ionicframework.com/u/paishin)\
**Post date:** [February 12, 2015, 1:09am UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/1 "2015-02-12T01:09:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [February 12, 2015, 7:11am UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/2 "2015-02-12T07:11:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paishin](https://avatars.discourse-cdn.com/v4/letter/p/b487fb/32.png) [@paishin](https://forum.ionicframework.com/u/paishin)\
**Post date:** [February 12, 2015, 4:24pm UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/3 "2015-02-12T16:24:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [February 12, 2015, 4:26pm UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/4 "2015-02-12T16:26:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paishin](https://avatars.discourse-cdn.com/v4/letter/p/b487fb/32.png) [@paishin](https://forum.ionicframework.com/u/paishin)\
**Post date:** [February 12, 2015, 4:27pm UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/5 "2015-02-12T16:27:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [February 12, 2015, 4:37pm UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/6 "2015-02-12T16:37:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [February 12, 2015, 4:41pm UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/7 "2015-02-12T16:41:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [February 12, 2015, 4:54pm UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/8 "2015-02-12T16:54:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [February 12, 2015, 5:21pm UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/9 "2015-02-12T17:21:02Z")

</div>

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

> **[collection repeat and navigation](https://codepen.io/KillerCodeMonkey/pen/azqzpR)**
>
> A barebones starter template for Ionic development Forked from \[Mike Hartington\](http://codepen.io/mhartington/)'s Pen \[collection repeat and navigati...

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [February 12, 2015, 5:30pm UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/10 "2015-02-12T17:30:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [February 13, 2015, 6:47am UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/11 "2015-02-13T06:47:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paishin](https://avatars.discourse-cdn.com/v4/letter/p/b487fb/32.png) [@paishin](https://forum.ionicframework.com/u/paishin)\
**Post date:** [February 13, 2015, 5:39pm UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/12 "2015-02-13T17:39:48Z")

</div>

Cheers guys, thank you so much for this

---

<div class="post-metadata">

**Author:** ![paishin](https://avatars.discourse-cdn.com/v4/letter/p/b487fb/32.png) [@paishin](https://forum.ionicframework.com/u/paishin)\
**Post date:** [February 18, 2015, 2:59am UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/13 "2015-02-18T02:59:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [February 18, 2015, 6:50am UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/14 "2015-02-18T06:50:54Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![paishin](https://avatars.discourse-cdn.com/v4/letter/p/b487fb/32.png) [@paishin](https://forum.ionicframework.com/u/paishin)\
**Post date:** [February 19, 2015, 3:15pm UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/15 "2015-02-19T15:15:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [February 20, 2015, 6:59am UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/16 "2015-02-20T06:59:02Z")

</div>

Put the content at the end of the list?

Or use this:  
[http://ionicframework.com/docs/api/directive/ionInfiniteScroll/](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

---

<div class="post-metadata">

**Author:** ![sarahsga](https://avatars.discourse-cdn.com/v4/letter/s/3be4f8/32.png) [@sarahsga](https://forum.ionicframework.com/u/sarahsga)\
**Post date:** [June 24, 2015, 10:52am UTC](https://forum.ionicframework.com/t/adding-elements-before-ion-content/17478/17 "2015-06-24T10:52:13Z")

</div>

You saved me! Thanks 😄😄