Why do short lists scroll vertically (to nothing)?

10 views
Skip to first unread message

Kevin Bezold

unread,
May 8, 2015, 9:24:45 PM5/8/15
to chocolat...@googlegroups.com
I just installed git, npm, node, gulp, and the chocolatechip-ui source code and built the environment to get to the examples. (whew!)

Now that I'm able to see them, I noticed that all of the lists scroll even when the number of the items in the list is small.  For example, I brought up "navigation-list.html#/main" which has only four items in the list and it still has a vertical scroll bar where the list can scroll up to blank space which removes the first item and a half from the display.

Why would a list this small require a vertical scroll bar?

Thanks,
Kevin

Kevin Bezold

unread,
May 8, 2015, 9:44:26 PM5/8/15
to chocolat...@googlegroups.com
If I edit

chui-android-3.8.5.css

and remove

min-height: 100%;

from

article > section,
.scroller-vertical {

the problem is resolved.  The question is "why is this property there and what am I going to break by removing it?"

Thanks

BTW, this looks like a very nice foundation.

Robert Biggs

unread,
May 27, 2015, 10:35:46 PM5/27/15
to chocolat...@googlegroups.com
What browser are you seeing this in? Is this desktop or mobile? min-height: 100% means that section will collapse if there is less content. There technically should be a bit of a snap when the user swipes on a content area to show that it is indeed a scrollable container. This is for consistent behavior across all views in an app. The section tag creates a vertical scrollable container automatically. However, if that scrollability bugs you, feel free to remove it. However, as you build out your app with more data, make sure scrolling is still working properly everywhere.

--
You received this message because you are subscribed to the Google Groups "ChocolateChip-UI" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chocolatechip-...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all
Reply to author
Forward
0 new messages