Web Framework 2 Mobile Page Clipped to Screen Size - Not Scrollable

Targets Web
1

I have converted a large web application from Xojo Framework 1.0 to 2.0.

The main screen consists of a large image presented in a WebPage that contains a WebImageViewer with the image in the Picture property. The image scrolls fine in both computer and mobile browsers with Framework 1.0. Scrolling also works fine with Framework 2.0 on computers, but on mobile devices only the small top-left region is visible since no scrolling of the web page is possible.

With Framework 1.0, to allow scrolling large pages on a small mobile device screen you must set the MinWidth and MinHeight fields like this.

ImageViewer1.Page.MinWidth = Pic3.width
ImageViewer1.Page.MinHeight = Pic3.height

The same trick does not appear to work with Framework 2.0.

ImageViewer1.Page.MinimumWidth = Pic3.width
ImageViewer1.Page.MinimumHeight = Pic3.height

The problem appears to be 100% repeatable on all mobile devices. Hopefully, I am overlooking a known solution so Framework 2.0 can be used for Apps that work on mobile devices.

2

What happens if you try something like:

ImageViewer1.Page.Style.Value( "min-width" ) = Pic3.Width.toString + "px"
ImageViewer1.Page.Style.Value( "min-height" ) = Pic3.Height.toString + "px"

or:

ExecuteJavaScript( "$('#" + ImageViewer1.Page.ControlID + "').css({'min-width': '" + Pic3.Width.toString + "px','min-height': '" + Pic3.Height.toString + "px'});" )
3

Thanks for the suggestions. I tried both separately and viewed it from a browser on Android device, but there was no affect.

4

Interesting. I’ll fire up my Android emulator tomorrow and see if I see this issue if someone else doesn’t beat me to it.

5

This test project is running at: http://69.10.54.253:8080

The window has three buttons that change the picture in a WebImageViewer. The picture will only scroll on desktop computers. On iOS or Android physical devices (or simulator), the window will not scroll.

6

I just tested on my iPhone. It doesn’t scroll if I drag on the image, but it does if I drag on the empty area to the right of the buttons. Can you confirm?

7

Try adding this to the Shown event of your WebImageViewer:

ExecuteJavaScript( "$('#" + me.ControlID + "').off('touchstart touchmove touchend touchcancel');" )
8

Yes, I can confirm on both iOS and Android devices, it will drag on the empty area to the right of the buttons. That may be an important clue.

9

I tried this suggestion, but it had no affect.

As a test, I moved the WebImageViewer control slightly to the right. Now you can scroll up and down using that left margin area that exposes the underlying window. It seem that the finger scrolling action on the WebImageViewer control isn’t passed through to the WebPage on mobile browsers like it is on desktop browsers.

Here is the updated app: http://69.10.54.253:8080

10

Yeah, that’s what my last bit of code tried to fix, by disabling the touch events for that component. I’m wondering if Modernizr isn’t attaching on mouse events and translating touch events. Let’s try this:

ExecuteJavaScript( "$('#" + me.ControlID + "').off();" )
11

OK, I see what’s going on by looking at the framework JS. Can you send me your test project so that I can test locally a bit more easily?

12

Actually, just go ahead and open a Feedback Case and attach your project. Any workaround I implement delves far too deeply in to modifying the framework at runtime to be safe or avoid Greg potentially getting mad at me.

13

I tried this latest suggestion. I did not work, but I think you are on the right track. I see that a finger slide on WebLabel, WebButton or WebListBox will scroll in a mobile browser. This problem only appears to affect WebImageViewer.

14

Yeah, there’s some specific code in the framework for the behavior of the ImageViewer that needs to be handled by Xojo.

1 Like
15

Just to put this out there, my GraffitiRectangle component for Web 2.0 should be a viable alternative for you here if you’re a subscriber.