Ion-content scrolling problem with content above

ionic-v1
1

This thread is similar to this one, but the suggested solution doesn’t work for me, so I decided to ask again.
Here is the problem: I have a button above the list like this

and it just scrolls over it, which i do not want to it do. Ion-scroll has the same behavour, and doesn’t solve the problem, and i can’t set fixed height of content (which doesn’t help anyway, i tried).

Here is the code, ionic version is beta 1:

<div class="item-container">
                    <button ng-click="csCtrl.toggleLegend()" class="button button-block button-stable button-small">{{csCtrl.isLegendEnabled}}</button>
                    <ion-content has-bouncing="false" scroll="true" style="position:relative; height:200px">
                        <ion-list>
                            <ion-item ng-repeat="series in csCtrl.dataTemplate">
                            {{series.label}}
                                <label class="toggle toggle-energized">
                                    <input type="checkbox">
                                    <div class="track">
                                        <div class="handle"></div>
                                    </div>
                                </label>
                            </ion-item>
                        </ion-list>
                    </ion-content>
                </div>
1 Like
2

Yeah this is an invalid structure for ionic:

ionic wants
a
ion-header followed by an optionally ion-header (subheader) and an ion-content.

I think what you want is a subheader.
add an ion-header with class “bar-subheader” above your ion-content and remove the “div” around it.

That you get something like that:
http://ionicframework.com/docs/api/directive/ionHeaderBar/

3

Thank you very much, this helped a lot. But how do i fix this? I would like it to stop scrolling if it reached the last element. (Or scroll back to it, as ionic does in most cases)

4

did you remove your style attributes on the ion-content-tag?

5

I didn’t modify it in any way.

6

Strange, may you build a little codepen fir this view?

7

Here goes.

8

Like i said… remove style=“position:relative; height:200px” (your style-attributes) from the ion-content ;).
see here

9

Thank you, i added this for ion-scroll and totally forgotten about this ;~;