I am building a small demo app which is built to run on mobile devices(you can test it in a desktop browser though). The problem I'm having is that not all the inner content will display. Here's the live page: http://byjakewithlove.com/code/mobile-webapp/
You can't scroll vertically or horizontally no matter how you resize the window. I tried setting height: 100%; and using the overflow feature to force scrollbars. However this will not work..
You can tell when all the content is displayed because I have a small vector graphic at the very bottom. If all you see is text, you should be able to scroll more until you see this graphic. I have no idea what the issue is!
This is behaving the same way in Mobile Safari and on my desktop(Chrome and Firefox). I would appreciate any help I can get here as I've been scratching my head for a few hours now
Turns out I had the container set to overflow: auto and this was causing another scrollbar to appear. Removing this meant just 1 scrollbar was in place
Plus I had the element using position: absolute and the parent had nothing.
Added position: relative; and now the whole thing runs smoothly. Just took a couple hours of trial & error.
Reply With Quote
Bookmarks