Help With Screen Size and Contents

I am stuck on my layout. I am trying to transition much of my app from web viewer to API-driven data blocks. So, instead of loading a web page with all of the data, I am creating a layout that calls and API, pulls all of the data for my app, and then I parse it out. With a web viewer component, the user can scroll the page from top to bottom. What I have noticed with creating rows and columns is that the bottom is cut off when my screen content gets too tall for the screen. I tried putting everything into a main column set to fit contents and made it scrollable, but it is very difficult to scroll and I can tell if all of my data is loading or still cutting off. How can I get my app to show data past the bottom of the screen? Is there a way to adjust the size of the container so that it contains all of my data and I can scroll it?

This is what it looks like when I pull up on the screen. There should be a lot more data below that bottom block…

1 Like

I think I may have found an error in my way of thinking. If I set a min height, I can ensure that my container is no smaller than my data. This is a bit confusing for me, because I thought fit contents would ensure the container is sized to fit all elements within in. I’m guessing that’s not truly the case.

Hi! I am not sure if I completely understand your problem, but if you are looking for a way to create a scrollable column, you should try this method -

Get a new column and set it’s height to fill container, and then put your column (which has your contents inside it) inside the new column. Now, set your contents-column height to (below image ↓), and scrollable to image.

image


The above method works for me when I want to create a scrollable column. I don’t know why, but normally setting a column’s height to fit-contents / fill-container and scrollable to true does not work very well.

Let me know if this works for you. Cheers!

1 Like

Thanks, @kartik14! I tried that and a combination of things. What ended up working for me was setting a minHeight value in the advanced properties of the column. I can just tweak that minimum height to fit my data, which does not really change size, and that seems to ensure all of the data is loaded and I can scroll down to see it.

2 Likes

Alright. :+1: If your problem is solved, please mark your last post as Solved. Happy Thunking!

1 Like