A Thunkable Academi tutorial question

I am trying to follow along, with the tutorial in the Thunkable academi, with the Team Directory, with an idea i had for an app. I am building plastic scale models and want to keep track of them. My layout is almost the same as the team directory. But for the directory it only display three things. I want to display two images (one box art and the finished model) and some details like brand, scale, model no, parts, size, date on stock, when started the build, and when it is finished. But the screen is not long enough. How can i scroll up or down to display all these details? I thought maybe to stretch the screen but thats not possible (unless i did something wrong). Hope my question is clear and that you can help/explain it very simple to me.
I just started with Thunkable and don’t know anything or much.
Many thanks in advance for your help, time, and effort. :slightly_smiling_face:

Welcome to Thunkable! I’m not familiar with that tutorial but if it uses a Data Viewer List (DVL) or Data Viewer Grid (DVG) then you can create a custom layout for those and include any details from a spreadsheet.

Thanks for your reply.
Right now, I am placing the “text” labels and next to it will be a data field.
But I have more text labels than screen space.
Normally on a mobile device, you can scroll down.
So, now while I am designing the layout, I also already would like to scroll down, so I can place more lines with text labels.
Do I then maybe need to work with something like containers?
Again, I am very new to Thunkable and this is just a starting tutorial and I already want to do more than what the tutorial is trying to explain. :smiley:
Or maybe containers are for a different platform? :sweat_smile:

If you use a Data Viewer List/Grid, that will scroll automatically. If you don’t use one and you’re doing all of the layout manually, then yes you would need a container.

1 Like

Hi Pierre,

Welcome to the Thunkable Community!

I believe what you’re trying to do is add additional labels on your screen that you can populate with data from your connected spread sheet, but there isn’t enough screen space for all of your fields, is that correct?

If so, by default, the screen’s scrollable setting is set to false. You can adjust this in the screen’s properties panel.

I hope this helps!

Best,

Lindsay

2 Likes

but @lindsay1 , that’s only so helpful. it’s actually really difficult to build a screen in thunkable that’s taller than the designer without using some crafty css tricks to actually change the canvas size.

i’d love to see a video, from you, the wonderful educator you are, on how you’d go about doing this in an effective manner. cause from my experience, it’s actually quite difficult to build a screen taller than the design screen even though that option is there.

it was easier when the StP editor was in use, but with DnD it’s quite a bit more complicated.

Perhaps things have changed recently

1 Like

@jared , thank you for your reply on @lindsay1. When i read her answer I thought that that was the solution. But when I saw your reply, I got the feeling that it would not be so easy. Later I will try it out myself, but atleast I am prepared that it maybe will not be that easy.

@jared, I was just able to do a quick test, and it looks like it is working okay.
You need to be a little bit careful when you place things on it because it scrolls a bit quickly downwards.
And you need to be careful when you place things because it is very easy to overlap things and things will disappear behind each other.
Otherwise, it looks to work.

@lindsay1, thanks
For some reason, I had overlooked this option. :slight_smile:
After the remark from Jared, just to see if it would be easy or not, I was just now able to do a quick test and this was the thing I was looking for.
It needs a little to get used to because things scroll very easily and it is easy to place components over each other, which makes other components disappear behind it :slight_smile:
Thanks

1 Like

just wanted to revist this topic.

as an amendment to the video, the second screen doesn’t allow dragging to make the screen taller because i forgot to turn on scrolling. the first one though…

it’s just not an easy thing to use.

Sorry if this come across sassy, it’s just some candid feedback. the ability to change the screensize as a hidden “feature” is neat but convoluted

My preference would be to use the Layout component, but if @pierre.demanbyd3x is remixing one of the existing templates then it’s not a massive deal to change the Y value of a component

Once you know that the height of that screen is 667 px then anything beyond that value will start scrolling!

It’s not the most intuitive thing in the world to be fair, but it’s not a difficult as you were making it out with editing the CSS of the page @jared . At one point actually there were chrome extensions that someone had made to change the colours of the editor, maybe you could do something similar for longer screens?

I think so. I used to know the name of 1 but can’t remember now.

I don’t actually make tall screens like that typically :joy:

And I believe the layout component does solve that issue probably. But setting up scrolling on DnD is not intuitive is what I was getting at.

It would be really nice to be able to hard code the height/width in the builder for a more precise builder experience. That’s all.

You’re right tho, I suppose you can hardcode the x/y values but again, that’s not an intuitive way to build on a drag and drop builder.

Hi @pierre.demanbyd3x. :wave: We recently released a video tutorial on creating scrollable screens. You can check it out here: Increasing screen real estate with scrollable screens (with video tutorial). Cheers!

1 Like