Problem doing scrolling list without ion-content

ionic-v1
1

Hi there.

I’m having problem for hours now, I can’t make a simple app looking like that:
image

Here is my code:
http://codepen.io/abnaxus/pen/qEXgVo

I don’t want to use headers (because in the end, I need 3 headers, or even more in the future).
I don’t want to use ion-content, because I want the list only to be scrollable and not the whole page.
If you have any idea how I could accomplish that, would be lovely.

Thanks in advance !

PS: Adding a over the makes it work.
But I though the list didn’t need any scroll around to be scrollable. :confused:

2

Another problem I have (just noticed it now).

The scroll list doesn’t fit the whole screen space left.
But the content space…

I’m really having troubles with layout managing with Ionic. :confused:

Edit: My bad, I can’t even scroll to the bottom of the list, it just bounces me back on top of the list everytime I try to scroll down. <.<

3

1.I recommend you to use ion-content still. The scroll bar is very nicely designed. The problem is that ion-content itself is absolutely positioned(top). You may want to wrap most of the content in it in any view. And fixed positioning your other selections.

2.If you just hate it. Use overflow:scroll in css or allow overflow scroll in ion-scroll or ion-content

4

The problem is that ion-content scroll the whole view.
And I just want some part of the screen to be scrollable. :confused:

Anyway, I found a solution using:

ion-view
— div
— ion-scroll
------- ion-list
— div
— ion-scroll
------ ion-list

And it seems to work fine.

PS: What do you mean by overflow:scroll ?

5

Sorry for late reply.
I didn’t test your structure. But according to this hierarchy it may be breaking the html structure.
If you want to scroll some part of the content you may just refer to:

overflow:scroll (visible,hidden)

This is a css definition, you may look it uphere.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Also when you want some part scrollable and other’s not you may need to add a attribute to your ion-content tag like

<ion-content scroll=“false”>

The down-side of this method is that it won’t have a scroll bar.

6

What about this:

<ion-content scroll="false">

      <div style="height:55%">
      </div>

      <ion-scroll id="panelScroll" overflow-scroll="true" zooming="false" direction="y" style="height:45%;width:100%;">
      </ion-scroll>

</ion-content>