[Solved] "Screen= Scrollable" & "Column=Scrollable" Is Not Working

I need a scrollable Home screen for the app.

When Screen Scrollable = False

The UI Display is Fine …

When Screen Scrollable = True

This happens

All the components gets squeezed on the top.

I have also tried inserting all components inside a Column and then made the Column as Scrollable but - The Column is not getting scrollable, it has no effects. .

Please help me out to fix this.

Did you make the
screen { scrollable = not true}
Column {scrollable = true, height = fit contents}

1 Like

Yes Sir i have tried it , this is the result…

Still No Scroll

Hmm. Check out this example with scrolling column and a floating action button.

https://x.thunkable.com/copy/80c318be59665bb0e0fc2d5133efd9e5

1 Like

@jared I checked it out, it’s nicely designed.

I have also implemented same settings

It’s showing as scrollable in Live Preview but is not scrollable when i export the App.

1 Like

https://x.thunkable.com/copy/54775714d7782985dc30f6e7a8f6dd66

@jared Please check out the backend, any help will be much appreciated.

@jared entire Homescreen

@jared just like it is in live test mode of Homescreen

Hey @unicornbrands - are you a PRO user? I can’t see any record of you contacting PRO support.

You posted about this and then 3 hours later (On a Saturday) you created a second post to berate people for not replying to you? This has been clarified here several times in the past, but I think you’re being disrespectful to our wonderful community of volunteers so I’ll say it again:

The community is a space for Thunkable enthusiasts to exchange ideas and encouragement…if you want support from the Thunkable team then you should reach out directly to us.

Reading through your post above, there are 2 things missing.

  1. A project link (rather than a copy link)
  2. Whether this is live testing or installed and if you are on Android or iOS

Thanks

1 Like

Hello @domhnallohanlon , Yes I’m a PRO User, but i didn’t knew about this PRO Support thing earlier and when i found out - the popup said that team will come live back on Monday

Actually this was my Third Post in the community. After not getting any solutions for the first 2 Posts even after waiting for the whole day, i created this post.

https://x.thunkable.com/projects/5f36684ffcafe32fee979fd3

I had no such intentions, i really love all the great and like-minded people in this wonderful community, but-

Try to understand my situation, I have a Deadline approaching soon and I have been posting these basic issues from past 2 Days but go no solutions in return.

It became impossible for me to work even after trying every possible thing inorder to accomplish these basic things like- Scrolling and Aligning Image on Top

That’s why i lost my cool and had to post this.

Pardon me, if i have hurt anyone’s feelings in the community because i had no such intentions.

Thanks.

Thanks for the project link - this will allow us to investigate further.

The first thing we need to do is reproduce this issue on a test device. Please don’t forget to include the following:


Also, it’s probably worth letting us know when your deadline is and a little more about the client you are working for.

Thanks

I restarted the project from the scratch and used a Column as a Parent component for all the Sub-components in the Screen.

Then i applied following settings-

  • Screen Scrollable = False
  • Column Scrollable = True
  • Column Widht = 100%
  • Column Height = Fit Contents

And the most important thing is - To fix every component’s Height as - Absolute Size

Thats the Issue.

If we input component’s height In Relative Percentage or in other type then the Scrollable Function doesn’t works.

So the Height of each and every component in the Screen has to be assigned in Pixel (Absolute Size) inorder to get a Scrollable Screen.

But the issue with assigning Heights of components in Pixels is that-

The App will not be Responsive, as every phone has different resolution (Height x Width).

Suppose, If i set the Height of my Header Image as 600Px, then-

The Image will cover 25% of Screen’s Height in case of a Higher-End Device like- iPhone 11 but -

The Image will cover about 50% of Screens’s Height In case of any Mid-Tier Device which has a lower resolution.

So in this way, we will not get a Responsive App that Looks Similar across all Mobile devices.

The deadline is on - Tuesday and i’m working for a client to create a Healthcare Ecommerce App by combining- Thunkable and WooCommerce.

Thanks.

You can set component size with blocks via the device block for compute device width/height. Then you can do a % of that

It is responsive. Just not out of the box. Thunkable is a lowcode solution for advanced projects. Not totally nocode for all.

3 Likes

@jared Seems good, will try this now.

True, buddy :blush: It just take a bit of a time to adjust yourself to this, just like like other good things.

Thanks.

1 Like

I THINK I’ve identified an issue with scrollable columns. Using the App below, you can see that when using “LIVE TEST” (web) if the column height is set to “Fill container” the top of the list is not visible. But when using Thunkable live on android, the scrollable column works correctly. But if the column height is set to “Fill contents”, the scrolling works correctly in LIVE TEST (web), but the Thunkable Live App on Android does not scroll.

The work around I used is to change the column height setting based on the device.

If this is not fixable by Thunkable. at least a update to the documentation which still reads
For scrollable to work, you must also set your screen height to fit contents

Solution:

If Device = Web then
-Column HEight= Fill contents
Else
-Column Height = Fill container

Interestingly, you will notice that the values I use for setting the height (fill contents) is NOT what the Designer shows, but it works…Feels like some naming inconsistencies in the source code. :frowning:

6 Likes

True, it works when we set the specific height according to the device.

I hope they’ll be fixed soon, if there are any.

Anyways, thanks for the help Mate :slightly_smiling_face:

1 Like

Nice work!!

Translated with Google
I am also a PRO user and I did not know of the existence of “PRO support” to tell the truth even now I can’t find it, an address came up putting “PRO support” in the search box but if I hadn’t read this post I wouldn’t have never done such a search.
A link maybe in the membership section would not be bad.

You made my day, @drted :grinning: Thank you sooo much!

1 Like