I am using Rhomobile to develop apps. I have wide images on an app and would like to enable horizontal scrolling to view the images. Vertical scrolling is automatically available but not for horizontal scrolling. Here's what I found:
I cannot scroll horizontally in Rhodes simulator.
I cannot scroll horizontally in Android emulator.
I cannot scroll horizontally in HTC android.
But I can scroll horizontally in Samsung Galaxy Tab.
I've tried to put "overflow:scroll", setting div width, body width, but the result are still the same.
I believe this would be a limitation on the device or emulators browser, as Rhodes is using a WebView.
I removed jqtouch.css and it works now :)
Try with
Scroll : 'horizontal'
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.
Objective:
Extend into/draw within android notch area, specifically in landscape mode. Testing with 2 physical devices results in the notch area being unusable (black) in landscape mode.
Note:
Utilising extendBodyBehindAppBar, ExtendBody and SystemChrome.setEnabledSystemUI mode etc successfully extends into the notch area in PORTRAIT mode, however when the screen is rotated to landscape, the notch area is truncated and not utilised.
Problem: When extending the screen in landscape mode on most devices with curved corners the screen looks stupid and imbalanced with a squared-off black area in the notch section and curved at the other end.
Cheers guys.
Turns out, as it currently stands it's an open issue.
See Github issue #59236
https://github.com/flutter/flutter/issues/59236
On NATIVE Android 3 options exist to control drawing in the cut-out 'notch' area:
LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
This is the default behaviour. Content renders into the cut-out area while in portrait mode, but content is letterboxed while in landscape mode.
LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
Content renders into the cutout area in both portrait and landscape modes.
LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
Content never renders into the cutout area.
Further native Android information can be found here:
https://developer.android.com/guide/topics/display-cutout
As it stands, the native Android equivalent of LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT seems to be stuck on flutter.
If anyone manages to work around this (perhaps platform channel stuff?), please comment.
I've faced the same problem, but looks like in addition to
SystemChrome.setEnabledSystemUIOverlays([]);
we should add the following to Android style.xml:
<style name="AppTheme" parent="#android:style/Theme.Black.NoTitleBar">
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>
Tested this on a flutter demo project with Samsung S21 Ultra that has a notch and everything works as expected in a portrait and landscape modes.
Please note that I use flutter 1.22.6, but I am sure that the same approach should work on the latest flutter.
Currently I am using a vertical scrollbar for a div when the contents are larger than the height of the div. This works great on Chrome, IE 7(!) and Firefox.
However, on IOS devices like iPad and iPhone there are no scrollbars for divs. What is the recommended solution? For simplicity, I want to run the same code on all platforms: Chrome, IE 7+, Firefox, iPhone and iPad.
Thanks!
Actually there is an in-element scrollbar in iOS, it's just hidden until it's in use :( You use a two-finger drag to activate an element's scroll.
I don't think you can override the OS hiding the scrollbar, but overflow-y: scroll; in css is mostly likely what you want.
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.
I am coding a website for iphone.
Some of the content (images and strings I have no control over) is too wide to fit in the 320px viewport. When I first encountered this, it caused the entire page to revert to web page view (scaled small text).
So, I put the wide images in a div with CSS style="width:320px; overflow:scroll;" This stopped the page scaling but I assumed I would be ale to scroll that div horizontally to see the rest of the images (like the app store does with screen snaps). However, the scrolling just doesn't work on the ipod. (It does work on Safari in default Mac mode but not in Safari as iPhone User Agent.)
Anyway, how can I get the sideways scrolling on the ipod?
http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16
Scroll with 2 fingers?