Scroll discrepancy between iPad and iPhone and simulator

[maria8]

I am having some trouble with the scroll. I set it up so it works and looks fine on the iPad on the simulator and my device, but for the various iPhones or android devices it adds a whole bunch of extra space to the top before it scrolls up. 

I should also say i am so NOT a programmer and am using Kwik to build my apps. I typically just build one universal app, and kiwk does all the coding for all the various formats and such. Typically I don’t have any big format changes in our apps but this is the first time I have used a scroll, to scroll through text.

The majority of our patients who will be using the app have android devices, so I want to make sure it works and looks good on those, but would ideally like it looking and working the same on all devices.

[bjsorrentino]

Hi @maria8,

By “scroll” do you mean a scrollView widget? Can you show your code where you create this object?

Thanks,

Brent

[maria8]

  Yes I do mean scrollView widget.

– Scroll object

       layer.scroll_245 = widget.newScrollView { 

          top = 350, left = 0,  

          width = 1500, height = 1450,   

          scrollWidth = 500, scrollHeight = 500,  

          hideScrollBar = true,  

          hideBackground = true,  

          maskFile = composer.imgDir…“mask.png”,  

          horizontalScrollDisabled = true; 

       } 

       sceneGroup:insert( layer.scroll_245) 

       layer.scroll_245:insert(layer.text_compl) 

thanks Brent!

[bjsorrentino]

Hi @maria8,

OK, I think your issue is a simple configuration one:

First of all, please remove the “maskFile” parameter entirely… since Graphics 2.0, you don’t need to manually mask scroll views, as they are auto-masked according to the “width” and “height” parameters.

Next, you can remove the “scrollWidth” parameter because you’ve locked the horizontal scrolling, and thus a specific scroll width is irrelevant.

Next, you should define a “scrollHeight” which is greater than the “height” of the view. Basically, the scroll height is the total amount of distance that the view can scroll within the given size, and so it should be greater than the defined size.

If you have any other issues, please refer to the docs for current working examples (the code you post above seems to be gathered from some old resource, since “maskFile” has been long since deprecated as a parameter).

http://docs.coronalabs.com/api/library/widget/newScrollView.html

Take care,

Brent

[maria8]

Brent, 

I am using Kwik Which is a photoshop plug in that writes my code for me, since I am the artist and not the coder but our coder is indisposed for this project. That is why there was a mask, etc. 

I have followed your advice and in my head it makes sense. The scroll height is set to the length of the object, and I tried various other heights greater than the scroll height, but still two issues are happening.

It opens the simulator and the text is half way down the screen, even though I told it where the top is. I am using a photoshop text layer as my scroll layer and the layer is the exact size of the text area but it is still adding extra space on top. 

And I can only scroll maybe halfway through my text before it tries to bounce back to the middle of the text. The first half scrolls and pauses, like it should. But if I try to get to the end it bounced back to the middle upon release. 

These two issues do seem to be consistent with every device though which is good, since at first I got it lined up and set for the iPad and every other device was off. 

I even got so fed up with stupid kwik so I followed Corona’s video tutorial for the code section for a scroll view to no luck, my error was that the scrollView= nil. 

[bjsorrentino]

Hi Maria,

Can I see your current code that you wrote for the widget?

Thanks,

Brent

[maria8]

Sure! 

– Scroll object

       layer.scroll_245 = widget.newScrollView { 

          top = 330, left = 0,  

          width = 1500, height = 1500,   

          scrollWidth = 1264, scrollHeight = 2000,  

          hideScrollBar = true,  

          hideBackground = true,  

          horizontalScrollDisabled = true; 

       } 

       sceneGroup:insert( layer.scroll_245) 

       layer.scroll_245:insert(layer.text_compl) 

Thanks so much for all your help!

[bjsorrentino]

Hi Maria,

First, try adding “topPadding” and “bottomPadding” properties to the widget:

[lua]

    topPadding = 0,

    bottomPadding = 0,

[/lua]

Also, I think you may need to position the “text_compl” object in the center of your scroll view after you insert it into the scroll view. So in your case, something like this:

[lua]

– after you insert the text object into the scroll view…

layer.text_compl.x = 750  --half of 1500 (your scroll view width)

layer.text_compl.y = 750  --half of 1500 (your scroll view height)

[/lua]

Also, remember that the “scrollWidth” should be equal to (or greater than) the “width”… it may not matter too much in this case, since you have disabled horizontal scrolling, but it doesn’t hurt to make it 1500.

Take care,

Brent

[maria8]

Brent, I tried added both of those and the topPadding and bottomPadding didn’t change anything. Adding in the text_compl.x and y coordinates did change it. When the project opens it opens 8 lines under from the top of the text, and will let me scroll down fine and even get to the bottom of the text field. But won’t let me scroll up. It still bounces and won’t let me get to the top and stay. 

This seems so straight forward I am not sure why I am having such a hard time with it. 

[maria8]

Okay I have been playing around various values for the top and bottom padding and I think I got it working. I got it to where it looks fine all various apple and android devices (we are making it for both, so I want to make sure it works and looks good on both), I will keep checking just to make sure it doesn’t bounce around on the various devices, and is consistent once put on a device! But I think I got it. Thanks so much Brent! I really appreciate all your help. 

I got it set so top padding is -800 and bottom padding is 500. lol Very weird!

[bjsorrentino]

Hi @maria8,

By “scroll” do you mean a scrollView widget? Can you show your code where you create this object?

Thanks,

Brent

[maria8]

  Yes I do mean scrollView widget.

– Scroll object

       layer.scroll_245 = widget.newScrollView { 

          top = 350, left = 0,  

          width = 1500, height = 1450,   

          scrollWidth = 500, scrollHeight = 500,  

          hideScrollBar = true,  

          hideBackground = true,  

          maskFile = composer.imgDir…“mask.png”,  

          horizontalScrollDisabled = true; 

       } 

       sceneGroup:insert( layer.scroll_245) 

       layer.scroll_245:insert(layer.text_compl) 

thanks Brent!

[bjsorrentino]

Hi @maria8,

OK, I think your issue is a simple configuration one:

First of all, please remove the “maskFile” parameter entirely… since Graphics 2.0, you don’t need to manually mask scroll views, as they are auto-masked according to the “width” and “height” parameters.

Next, you can remove the “scrollWidth” parameter because you’ve locked the horizontal scrolling, and thus a specific scroll width is irrelevant.

Next, you should define a “scrollHeight” which is greater than the “height” of the view. Basically, the scroll height is the total amount of distance that the view can scroll within the given size, and so it should be greater than the defined size.

If you have any other issues, please refer to the docs for current working examples (the code you post above seems to be gathered from some old resource, since “maskFile” has been long since deprecated as a parameter).

http://docs.coronalabs.com/api/library/widget/newScrollView.html

Take care,

Brent

[maria8]

Brent, 

I am using Kwik Which is a photoshop plug in that writes my code for me, since I am the artist and not the coder but our coder is indisposed for this project. That is why there was a mask, etc. 

I have followed your advice and in my head it makes sense. The scroll height is set to the length of the object, and I tried various other heights greater than the scroll height, but still two issues are happening.

It opens the simulator and the text is half way down the screen, even though I told it where the top is. I am using a photoshop text layer as my scroll layer and the layer is the exact size of the text area but it is still adding extra space on top. 

And I can only scroll maybe halfway through my text before it tries to bounce back to the middle of the text. The first half scrolls and pauses, like it should. But if I try to get to the end it bounced back to the middle upon release. 

These two issues do seem to be consistent with every device though which is good, since at first I got it lined up and set for the iPad and every other device was off. 

I even got so fed up with stupid kwik so I followed Corona’s video tutorial for the code section for a scroll view to no luck, my error was that the scrollView= nil. 

[bjsorrentino]

Hi Maria,

Can I see your current code that you wrote for the widget?

Thanks,

Brent

[maria8]

Sure! 

– Scroll object

       layer.scroll_245 = widget.newScrollView { 

          top = 330, left = 0,  

          width = 1500, height = 1500,   

          scrollWidth = 1264, scrollHeight = 2000,  

          hideScrollBar = true,  

          hideBackground = true,  

          horizontalScrollDisabled = true; 

       } 

       sceneGroup:insert( layer.scroll_245) 

       layer.scroll_245:insert(layer.text_compl) 

Thanks so much for all your help!

[bjsorrentino]

Hi Maria,

First, try adding “topPadding” and “bottomPadding” properties to the widget:

[lua]

    topPadding = 0,

    bottomPadding = 0,

[/lua]

Also, I think you may need to position the “text_compl” object in the center of your scroll view after you insert it into the scroll view. So in your case, something like this:

[lua]

– after you insert the text object into the scroll view…

layer.text_compl.x = 750  --half of 1500 (your scroll view width)

layer.text_compl.y = 750  --half of 1500 (your scroll view height)

[/lua]

Also, remember that the “scrollWidth” should be equal to (or greater than) the “width”… it may not matter too much in this case, since you have disabled horizontal scrolling, but it doesn’t hurt to make it 1500.

Take care,

Brent

[maria8]

Brent, I tried added both of those and the topPadding and bottomPadding didn’t change anything. Adding in the text_compl.x and y coordinates did change it. When the project opens it opens 8 lines under from the top of the text, and will let me scroll down fine and even get to the bottom of the text field. But won’t let me scroll up. It still bounces and won’t let me get to the top and stay. 

This seems so straight forward I am not sure why I am having such a hard time with it. 

[maria8]

Okay I have been playing around various values for the top and bottom padding and I think I got it working. I got it to where it looks fine all various apple and android devices (we are making it for both, so I want to make sure it works and looks good on both), I will keep checking just to make sure it doesn’t bounce around on the various devices, and is consistent once put on a device! But I think I got it. Thanks so much Brent! I really appreciate all your help. 

I got it set so top padding is -800 and bottom padding is 500. lol Very weird!