Creating a custom data viewer layout

[nsappdev]

Hi guys. I am created a custom data viewer layout for my news tab in my app. It has an image, title, and description-as int he picture below. I am connecting it to a Google Sheet to keep it updated. I want to know how to make it so that if there is no image, there won’t just be a white gap on the screen, but it will fill - sort of making it dynamic if you know what I mean
I have a the 3 components inside of a container inside of a layout (it is all verticle)
What values should i put, im assuming for the heights so it becomes dynamic

[nsappdev]

Hey, anyone?

[tatiang]

What do you want it to look like if there is no image url for that container?

[nsappdev]

if there is no image i want it to be blank and fill in the gap if you know what i mean

[tatiang]

Like this? If so, then you probably need to have a container with height set to a specific pixel amount and put the image into it. That way, if the image is blank, the container still appears.

[nsappdev]

Hi I honestly don’t get what you are saying. Let me give this example, please g
Ignore the content it’s just what popped up. Twitter (x) is Abel to have both text and videos. Not all tweets have an image or video attached so it doesn’t just show a blank gap but it filled it in so it’s all nice smooth and neat

[tatiang]

Sorry, I suggested the opposite of what you originally wrote! The easiest fix for this is to include an empty string (“”) as the url for each missing image in your data source. And set the height of the container that has the image to Fit contents:

[nsappdev]

Hi it isn’t working for me, i may be doing it wrong. look at these screenshots.
Afterwards, i make the LAYOUT or the CONTAINER the data viewer layout?

[tatiang]

What I’ve found works is to have this format:

Layout
     Outer container
          Inner container

And save the Outer container as the custom DVL layout.

[nsappdev]

And what do i put for each in regards to the sizing - height and width
like what should i put for each of the container and what hsould i put for the components

[tatiang]

Try what I suggested for the height. If it doesn’t work, post a link to your project.

[nsappdev]

All the widths I should set to fill container and all the heights should be fill content - for all components?

[nsappdev]

Hi i cant send the link go my project but can you please instruct me the widths and heights for each of the above components?

[tatiang]

I don’t actually know the answer. I would do some trial and error. Try fill container for the widths and see if it looks how you want. Are you unable to share a link to your project or do you just prefer not to?

[nsappdev]

HI please check pm

[nsappdev]

hi nvm. the problem is that the image has a big gap on the bottom and top - for all images. look at this video in this link

Timeline 1.mp4

[tatiang]

I haven’t gotten a message from you.

[nsappdev]

Yea, sorry i deleted it. I really couldnt figure this out. I will avoid doing this because it cannot be figured out thanks for your help

[suniltec]

Hi, I had come across your problem when i was trying to find an answer to a similar problem. I just recently started using thunkable.

My problem was solved by using fit to contents instead of fixed dimensions which collapsed the area which held the label when it found a blank label where i needed it to be so. Maybe if an outer layout container is used which holds your image while making a custom dataview out of your layout, a similar collapsible effect might be achieved.

Please try it and let me know if it worked. Thanks.