I am designing some html pages for iPad. While trying out css overflow property like yscroll, auto. The scroll bar is not appearing in iPad and also the content not getting scroll. I tried in ipad simulator as well as in device. Is there any other way to achieve this property. Please help me out. Thanks in advance
There are no scrollbars in any of the iPhone OS. Use 2 fingers to scroll. This is the expected gesture and will unlikely be changed.
make sure your body and divs have not a
position:fixed
else scrolling would not work.
Related
I have this app that has a bar at the top of the page that has a bunch of clickable elements it has always been a problem since on Safari IOS when clicking high up it brings down the address bar and exits fullscreen. We solved this initially by adding some padding up top to make the clickable area larger but they seem to have increased this size on IOS 13 and adding more padding will make it look horrible. Anyone had this problem and have a workaround for it?
Some way the click area for bringing down the address bar smaller or something?
The big problem is that we need our app to stay in fullscreen so the most optimal would be to be able o decrease the clickable area for the address bar to come down or to be able to block it in landscape mode is there really no way to go around this? for instance going into twitch.com on safari and iPhone and put it in landscape you are not able to press the search icon.
I have the same issue, I don't think is possible to fix this as it seems to be a safari issue, if you check not event apple.com site works as expected.
The workaround I did is detecting when the app gets out of fullscreen by comparing the screen.height with the screen.availHeight and move the top bar just below the address bar and there users can click, not optimal, but works for us. :)
Hope it helps
In your CSS code try to remove every value of "REM" "VW" "VH" use only pixels "PX". that should fix the issue 100%.
When I write my horizontal scroll box inside the view-content, it does not work...However if move it out of the view-content, it can work... Does anyone know what's wrong? I guess some css for view-content? However I don't know what's the default code...
May be this is due to the double scrolling at same position which you may not able to proper scroll at iOS. We can do the same ar brower because scroll and drag is different in browser.
I need help making my web site iframe scroll on the ios8 ipad.
https://secure.gymnasticseast.com/4dcgi/1/class_manager.a4d?loc=bellevue
This shows an iframe the slides horizontally, but does not move at all vertically.
I've tried all of the combinations of css, inline styles suggested here to get it to work, but none have yet to scroll vertically on the iPad.
Please help!
Thanks!!
In my experience IFrames an Framesets don't work on Safari mobile, there are other solutions that do work depending on the problem.
Follow this link that confirms that.
This is frustrating and I have seen and tried many answers but still end up with a zoomed effect on my webpage when I view on iOS. I have experimented with various viewport settings but the initial view is always zoomed.
Here is the experimental link. The page has a fixed header and footer and looks and functions fine in web browsers but in iOS it looks zoomed in. If I double tap, it resumes the desired view.
http://jbrubaker.fatcow.com/dealer/index2.html
Viewport settings:
Is it a CSS issues?
A fixed element issue?
Thanks in advance.
Assuming that you are using UIWebView to view the site.
Set the BOOLEAN scalesPageToFit property of your UIWebView to YES.
This would hopefully solve your issue. If not then get back with your comments
I am very new to HTML5 development for ipad. I am creating my first application for ipad using HTML5. Everything is done except I am facing one problem. Problem description is.
There is one vertical overflowing div. This page is viewed properly in computer's browser but when the same page is viewed in ipad the overflowing section is cutoff and it appears that there is no overflowing content.
Please let me know the proper way of doing it.
On the iPad scrollable div's using overflow scrollbars will not appear on that div. The only way to scroll is using a two finger swipe.
Joe says that Scrollability is not yet ready to be used, so I wouldn't implement it in a production system.
To do this you have other options like:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
You want native-like scrolling on the iPad in your HTML5 application? You might want to check out a project called Scrollability by Joe Hewitt: http://joehewitt.github.com/scrollability/
Check out https://github.com/appmobi/aux_web (aUX_webScroll) . I'm the author, so if you have any questions, let me know.
iOS5 has the new property to allow scrolling on divs, but you'll find out that when you use it in a webview, the whole webview moves too and surprisingly, not everyone upgrades the OS.
I wrote an article about new features in iOS 5. Also this topic is covered on section -webkit-overflow-scrolling: http://samuli.hakoniemi.net/ios-5-and-new-features-for-web-developers/#webkit-overflow-scrolling