Data Viewer List custom layout problem

[tatiang]

I’m having a small issue with a custom data viewer list (DVL) layout in the Snap to Place interface.

What I want is three separate columns with an image in the left column, text in the center column, and text emojis in the right column. None of the content should overlap the column edges.

Here’s what it looks like in Thunkable on my iPhone 11 (the yellow lines will be hidden but are there right now for testing):

At the top is the DVL component with width set to 100%. I’m not sure why it appears to be taking up less than the full width but it displays at 100% on my iPhone (see below). The bottom part of that first screenshot is the actual DVL layout that I use for saving the custom layout.

The issue is that the book cover images in the left column aren’t centered in the left column component and worse, that they overlap into the center column.

I thought that by setting each column’s relative width to a portion of 100% (left=20%, center=65%, right=15%) and placing them inside a row set to fill container (the container being the screen), it would adjust things correctly. The center column component has a left margin set to 10 pixels in the Spacing property panel.

What am I missing?

[tatiang]

The built-in DVL layouts work great… they stretch across the entire width of the screen and all of the content is displayed properly without any overlaps. I’ve tried a few different approaches but everything I do to create a custom layout fails to display well. Part of the issue is also that the in-browser Preview looks completely different from Thunkable Live on my iPhone.

Looking for some tips here…

[muneer]

The image component is by default uses absolute values. have you changed the settings to use relative sizes?

Have you tried using the background image setting of the Left column instead of the image component.

[tatiang]

I was using absolute sizing for the image component but making sure the height/width were less than the relative width (in pixels) of the left column.

I just switched to using the left column’s background picture and that seems to work better.

I did finally get it working as I want it, sort of:

Well, it looks like that in the browser preview. But in Thunkable Live, it looks like this:

[tatiang]

I’m still not quite sure what was wrong with my layouts but I’m happy to have a working layout thanks to @muneer (who suggested I set the column/row background picture instead of using an image component inside a column/row) and @jared (who made a helpful demo). It’s working in Preview and Thunkable Live:

[jared]

Looks great!

[muneer]

Let me try to explain what happens with components and images. For some reason, the engine that renders the image to the screen reads the height and width of the component containing the image and try to implement the same to the image.

You have a 100% height and 20% width for your left row and the rendering will try to use that. To fool the rending or workaround it, place another row inside the left row. The size of the inner row should be “fill container” for both height and width and the image will assume the same and, theoretically, should show filling the size of the left row.