Creating Lists or Lists of Lists in Thunkable X

In the next 2 weeks (probably less), we’ll have a visible property on components, so you’ll be able to hide components consistently across both platforms. This may make it much easier than styling the rows and columns.

(We’re slowly starting to add more info in the coming soon section of the release notes)

Brilliant Paul! I’ll look forward to that but I’m enjoying the learning process anyway! :wink:

Hi Alex

I’ve revamped the project (here) to use buttons and changing the background of the covers from transparent to white, but it doesn’t seem to work for making the corresponding row disappear.

Maybe I’m missing something obvious. I would have thought that a foreground colour would work, as opposed to a background colour but there’s no option for that. I’ve played around with putting an image in front with absolute positioning but it looks different on my Apple and Android devices. Where do I learn about absolute positioning?

In addition to the above, the screen jumps because it’s inserting the labels from left to right, including where the image is! How do I avoid that?

Cheers, Stuart

Hi Stuart

I changed the work covers. Now they are working. On my iPhone6, I noticed a small oddity. When the Play Lotto button is first pressed, all the buttons are shifted up a bit. This should not be, because the positioning of layout elements is not changed. Just change the cap color and activity buttons. I also noticed that when using the horizontal buttons = space-around on iOS cover does not close completely latest right ball and visible on its edge. On Android this is not. I think it is a bug in the markup. So, I changed space-around space between and made the indentation for the screen left and right = 8. Also I replaced the Image on the Column icon, and put all the indents for all Rows and Columns = 0. It must be for Android (otherwise there are problems with the markup).

https://x.thunkable.com/projects/5bef19eea5d05d53b720b2ff/project/properties/designer/

Regards, Alex

Hi Alex

I tried running your version on my Note3 but I had issues:

  • Note3: Only five balls showing on both Lotto and Euro rows

Since then, I played around with sizes and settings and have managed to get the app to work properly on both the iPad and Android. However, the sizes are smaller, so I’m not sure whether you think it’s still useable. Could you check it out on your iPhone6 and let me know? It’s still under the same link, as I haven’t made a copy.

During my play around with settings, I noticed that it was only the right hand edge of the last Euro ball that was being left on the display, which made me think about the sizes I had chosen. Making it more ergonomically pleasing would probably be to increase the size of the images, balls and button text slightly from the original settings but put the two yellow balls on a separate row, with something to depict they were lucky stars (either a surrounding image for each ball or simply a text label).

Cheers, Stuart

Hi Stuart

I experimented with the arrangement of balls in two rows in my application (for a beautiful display of the markup on iPhone5) and you probably opened the project at this moment. Then I changed the project to display the balls in one row.

I show the application screens. On iPhone 5, I see 1 millimeter edge of the last yellow ball when hiding a row. On the iPhone 6, the edges of the yellow ball are gone and everything is fine.

To hide the edge of the yellow ball, I propose to zero all the edgesOffsets for the cover

Regards Alex

Hi Alex (and the ThunkableX community!)

I’ve revamped the app so that it now shows the Euro draw on two rows; one for the first five balls and the other for the stars, plus shadowing on the balls and warped stars to keep the text central. See what you think here.

Overall, I’m happy with the outcome on all my devices but i’m not sure what it’ll be like on yours. Have a go and let me know.

Cheers, Stuart

Hi Alex

I’ve revamped the layout and graphics here but I’m wondering why my red and blue ball images have been cropped slightly at the bottom, cutting off the shadow and making it look like a straight line cut-off across the screen. The uploaded images show the full dropped shadow. Any ideas?

Cheers, Stuart

Hi Stuart

When saving images of balls, what type of transparency do you specify? I think this is due to the options for exporting images.

Regards, Alex

I look at your images of the balls and see that their shadow is cut off. It is harder cut for blue balls. Try to raise the ball so that the whole shadow fits on the image while saving it.

%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5

Hi Alex

I’ll pull the shadow up a bit in Photoshop before exporting, although the image looks like it has the full shadow. I can’t move the ball because it is centred on the image for the button text.

One of the things I’ve noticed is that I have to keep renaming my files before ThunkableX changes them. It presents previous versions of a similarly named file, even though they’ve been deleted. Is there a method to update images properly with the same filename?

Cheers, Stuart

Hi Stuart

You can try to reduce the shadow area.

You are right, you have to rename files every time, which is inconvenient. I sometimes convert images to base64 format or temporarily place them on my web server. So it turns out faster and easier.

Regards, Alex

1 Like

Hi Alex

My issue with image renaming is that my original choice was my preferred name. Will ThunkableX never allow me to make that choice, e.g. toggling between names of updated versions?

Reverting back to RedBall.png and BlueBall.png is what I want but with the newest version live. Any change could be just Reds.png and Blues.png, toggling between those names as newer versions are tested.

Cheers, Stuart