Help with native scroll bar and sections of it missing?

[Opaquer]

Hey guys!

So, I'm getting closer and closer to finishing my sudoku app, but came across an issue. I feel like it's an easy fix, but I've been starting at it for a couple of hours and I just can't see anything with it .

I've got it set up to take a screenshot of each sudoku that the user makes, so when the user goes to load it, they can see each of the sudokus and figure out which one they want to work on next.

My idea was to create images on the fly for each sudoku (working perfectly), and then to group all the pictures and create a native mobile scroller so users can scroll through the save files they have. This is the code I have, boiled down:

Code: Select all

on LoadSaves
-- delete all images first
-- have  a repeat that sets the dimensions of the picture, the filename, and create it using this code:
create image ("Save"&i) in group "ScrollGroup" -- at this point I have 2 columns of saved sudokus, starting in the top left, then top right, then next row and so on
-- setting the height and location of the group
   put the rect of group "ScrollGroup" into ScrollRect
   put 0,0,(the formattedWidth of group "ScrollGroup"),(the formattedHeight of group "ScrollGroup") into ContentRect
   if the environment is "mobile" then
      mobileControlCreate "scroller", "ScrollGroup"
      mobileControlSet "ScrollGroup", "rect", ScrollRect
      mobileControlSet "ScrollGroup", "contentRect", ContentRect
      mobileControlSet "ScrollGroup", "visible", true
      mobileControlSet "ScrollGroup", "scrollingEnabled", true
      mobileControlSet "ScrollGroup", "vIndicator", true
      mobileControlSet "ScrollGroup", "hIndicator", false
      mobileControlSet "ScrollGroup", "vscroll", 0
   end if
   end LoadSaves
   
   on scrollerDidScroll hOffset, vOffset
   set the vScroll of group "ScrollGroup" to vOffset
end scrollerDidScroll

Now, when I run this, it works perfectly, but if I change cards and come back using

Code: Select all

   go to card "SavesList"
   send "LoadSaves" to card "SavesList"

I *sometimes* get an issue where the top of the scrollable area actually isn't at the top of the area I want it to be in, as seen in this photo:

As you can see, the scrollbar is at the top, but there's all this extra space that's appeared there, and at the bottom, it's cut off by the same amount, so you can't scroll all the way down. And to make it more annoying, it only happens sometimes, so I can't figure out what's going on with it!

Does anyone know what causes this or how to fix it? As I said, it's probably something super simple, but for the life of me I just can't see what's wrong with it!

Thanks in advanced!

[jacque]

Native scrollers are in an overlay above the stack and will remain on other cards as you navigate. That can interfere in some cases. It's important to delete all native controls on closecard and recreate them on preopencard. That will realign the scroller and also stay out of the way when navigating around.

[Opaquer]

Thanks for the tip Jacque, I didn't know that about native scrollers so it's really handy! So, I made this code:

Code: Select all

on closeCard
   mobileControlDelete "ScrollGroup"
end closeCard

I also changed my code to be on preOpenCard instead of on LoadSaves, so it bypasses that handler entirely. When I open that card, the native scroller gets made properly, and when I close it it does get deleted (I didn't realise this before but if I try scrolling on a different card, the scroller would still be there, whereas now it's not). However, when I go back to the Saves card, it still does the same thing with the empty space at the top for some reason . Have I done something wrong with it?

[jacque]

Set the scroll of the group to 0 before creating the native scroller. That ensures the two are aligned.

[Opaquer]

Hi Jacque

That makes sense, but where should I put it? Also, would it be the vScroll of the group, or the actual widget? Setting both didn't seem to do much unfortunately, with me still having an issue with all the extra space. Could it perhaps be how I'm setting up the images and whatnot in the group, and their location that's a problem? At the moment I have it deleting all extra images just in case there's any around, then setting up each one in the grid pattern and creating it. Could something in that code be messing up how it interacts with the group and the scroller?

Many thanks

[jacque]

In the original handler you posted, just set the vscroll of the group before creating the native scroller:

Code: Select all

set the vScroll of group "ScrollGroup" to 0
if the environment is "mobile" then
  put the rect of group "ScrollGroup" into ScrollRect
  put 0,0,(the formattedWidth of group "ScrollGroup"),(the formattedHeight of group "ScrollGroup") into ContentRect
   ...etc

This is just part of the native scroller creation (it isn't really a widget, it's a scripted scroller.)

The content or layout of the group doesn't have any affect on the scroller. But if the group's vScroll isn't set to 0 when the scroller is created, the scroller won't be aligned correctly. The both always need to start at 0.

Edit: I'm assuming your group doesn't have any extra space at the top. If it does, then that would explain the discrepancy.

[Opaquer]

So, I put the vscroll where you suggested and it's still doing the same thing - every so often I end up with the same type of massive gap at the top and it not scrolling all the way down?

Something weird I noticed though... I made a button on the screen that calls the handler of LoadSaves (I put LoadSaves in the preOpenCard too just to check what's going on). When it does the weird thing with the gap, when I press the button, it fixes itself and works perfectly, even though both preOpenCard AND the button are both calling LoadSaves? How does that work??

[Opaquer]

So, uhh, I know this isn't great coding, but I was playing around on my app and accidentally clicked that button I told you I made...

Turns out, even though the scroller was working perfectly before I pressed the button, when I pressed it, it did the same thing that was happening before when I closed the card and came back to it.

Just for fun, I decided to call the LoadSaves twice in the preOpenCard section, and it *looks* like it's tentatively working! Don't ask me how, don't ask me why, but so far in my small tests I've done, it's working! I know it's a really bad solution, but at least it'll hold me over until I figure out the issue with the other code!

[jacque]

When the handler goes wrong, has the group been previously scrolled? It may be that LC is creating the new images at the previously scrolled position. I'm just guessing now but try moving the line that sets the group scroll to 0 to the first line of the handler to initialize it, before you delete the old images.

[Opaquer]

Jacque, you're a genius! I set the scroll of the group to 0 at the start and when the card gets closed and it's working like a charm without having to call it twice! Thank you so much for all the help!

[jacque]

Glad it worked, sometimes my guesses pan out. Now I just have to remember it.