The list should scroll between [space here] and [footerbar]. I’ve been trying to makes this work four hours. I’ve found that the entire content area is scrolling area rather than just the list.
Also, is there anyway to
put a scrollable list inside a fixed-sized box, like a browser UI.
have the scroll bar always be visible if the content is too large for frame – i.e. show the scroll bar of a list if the list is too long to show all of it.
Make your <ion-content scroll="false"> Then wrap the scrollable list in an <ion-scroll> Then you’ll probably want to fix height the form and have the ion-scroll flex to the rest of the space using some classes and CSS.
Thanks for your response. I understood the first sentence "Make your Then wrap the scrollable list in an ". I tried that. It’s the second sentence is beyond my far beyond my understanding. I know very little about CSS controlling the dimensions of things using CSS, etc. I’m a J2EE engineer not a front-end programmer
What I’m looking for is a framework-level abstraction of visual containers, in which widgets, such as a scrolling list can be placed. The framework should manages the glue that makes the containers fit the available screen space, grow and shrink, etc.
To make my question more general. How would I create multiple visual containers in the same page or overall ion-content. I just happen to use the example of having a form and a scrolling list. The form is in a container, positioned at the top of the page, as you said, with a specified height (which should be a % of the overall height). And a scrolling list in a container at the bottom of the page, whose height should also be a % of the overall content area (for any size device screen).
I’m looking forward to hearing your ideas. Perhaps other folks will chime in. This kind of thing has to exist, right?
I have been struggling w/ this layout as well. I have most of it setup, but have a problem w/ the list portion. In my case, I need three regions (top=chart, middle=slidebox, bottom=list). I have this all setup, but I struggle w/ sizing the chart and w/the scroll on the list working properly. The chart doesn’t seem to want to properly fill the top region. I wind up w/ it too small or too large and running into the slidebox. The ion-list renders well, but when the problem occurs when scrolling to items that are at the bottom of the list. The scroll position will always return to the top when released, i.e. scroll position does not hold. The list problem is actually my biggest problem. I put together what I have as a codepen embedded below…
Thanks for the response. It seems like you and I (and many other folks) find ourselves searching for recipes to create pretty ordinary UIs – nested visual containers, a UI we see on most every web site these days.
Perhaps I’m fundamentally missing something. I’m finding, from endless searching the forums for countless hours. I see that people are struggling when they try to do things that aren’t features of the widgets, tags or don’t look like a tabview or side menu. A reasonable recipe can’t require expert level knowledge of CSS. That’s want I want the framework to do – keep the nuts and bolts away from me.
Another example, is scrolling a list to a specific item in model, not to an x,y. i.e. scroll list item (10) to the top of the visual container. I’ve got no idea how to do that with a scroll delegate. I apologize from my frustration. I think the framework is terrific, I suspect more sophisticated UIs will get added to the framework over time.
