I am making a web app for the Android and iPhone that has a div for content. I can update the div programmatically and have it scroll down but I can't scroll using just my finger.
You can see it here: http://crosswordcoach.appspot.com/poc
Type in "Cookie firs" and then select that clue (obviously there are other bugs to work out!) and it will have enough hints to fill the screen. With Chrome on a PC it works correctly and the list becomes scrollable if it is too big for the screen. On the iPhone and Android it does not.
Does anyone know what the deal is? Thanks!
iPhones cannot scroll absolute positioned divs by default, I believe.
iScroll might help.
Related
My webpage at www.rlhismgraphicsltd.net moves around on iPhone and iPad. I've made it responsive and it doesn't move around on desktop but does on iPhone and iPad. The container I made is 100% width and max-width so it's supposed to stay contained within the viewports parameters. The page wanders and scrolls horizontally on iPhone and iPad. I used overflow:hidden and it does not prevent the page from wandering left and right on iPhone and iPad. If anyone has an iPhone or iPad you can check it out. I've opened the page on an android phone and it does not wander. I've inspected the page on Chrome and it doesn't move around like it does when I look at it on my iPhone and iPad. I can not figure out what the problem is.
I thought maybe padding and margins may be an issue but I can't really tell what may work because it is fine when I inspect the page on chrome. Once I look at it on my iPhone and iPad i get horizontal scrolling and it moves diagonally and doesn't stay within the viewports parameters.
I've run into a problem with Bootstrap's .top-nav only on Safari for iPhone. When scrolling through a .dropdown-menu, after releasing my finger from the phone, it seems to "keep" or "catch" the location my finger was and hover over that list-item, keeping the CSS style for that element's :hover. It doesn't attempt to direct the url anywhere, but it can be a little confusing to the end-user.
This does not happen on my Android phone or in the desktop browser at extra small width (no-touch).
I understand this could be a difficult question to answer, but I'm hoping somebody else has run into this problem on their own and knows the root cause / a fix.
Bootstrap 3, latest version of Safari for iPhone 5. Thank you!
edit: oh, also, this is Bootstrap integrated into Adobe Business Catalyst. I don't think that should make a difference, but it might be worth saying.
I created my first iOS 5.0 iPhone app and the app's actual size is 480 width by 320 height, which is the default size of the iPhone.
My problem is I don't want the app to allow scrollbars or what I really mean is the ability to scroll past the 320 in height which is happening.
I looked at the Safari Web Content guide here
I still can't seem to figure this out can anyone suggest a fix.
Thanks.
you can do two things. in your css set your main wrapper to overflow:hidden;
also add this to your js onDeviceReady()
document.addEventListener('touchmove',function(event){event.preventDefault()});
that will not allow any scrolling and lock the app down.
NOW if you do want to allow scrolling I suggest looking into iScroll it's really easy to set up and get working, and will give a native look and feel to the scrolling.
I've built a photography site that displays photos side by side, user scrolls though photos using a horizontal scrollbar. (link removed no longer works)
I have used the jscrollpane plugin to customize the look of the scrollbar, but I have disabled it for the time being as I look for a fix. The container is called .scroll-pane.
Can anyone tell me how to get this to work on an iPhone?
Thank you and happy new year
Yeah, that won't work on iOS. You can use two fingers to scroll such an element, but most people are not aware of that.
You should consider a responsive design that adjusts how your site functions in mobile browsers.
I have a web app that wraps the main site content in an Iframe to enable some elements that are persistent across the site (only way to do what I'm after as far as I can tell).
It works fine on most browsers, but there is a scrolling problem on the Iphone: The content displays, but trying to scroll does a drag and drop operation instead.
Is there any way to tell the Iphone browser to use normal scrolling in that specific Iframe?
Example site: http://carlocapocasa.com
Thanks a ton and a half,
Carlo
Use two fingers to scroll up and down.
I also had problems getting an iframe to scroll on iOS devices. My iframe was inside a DIV, which had it's overflow set to hidden.
My solution was to set the overflow of the containing DIV to visible.