Ion-content scrolling problem with content above

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-item ng-repeat="series in csCtrl.dataTemplate">
                                <label class="toggle toggle-energized">
                                    <input type="checkbox">
                                    <div class="track">
                                        <div class="handle"></div>
1 Like

Yeah this is an invalid structure for ionic:

ionic wants
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:

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)

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

I didn’t modify it in any way.

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

Here goes.

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

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