[Solved] Help to fix the Screen Layout to use in a custom DataViewer

Hello Thunkers!

Currently I’m using the SnP version and I’m trying to create a FaceBook-like Dataviewer layout.

After hours changing the components properties I can’t find a way to make my layout fits the main image correctly.

Anybody knows what in the hell I have to change to fit the different photos sizes / aspect ratios without leaving blank spaces before / after or hiding the the bottom row?

Look some different results I had:

In both examples, the Label below the photo that shows the photo description is hidden for some unknown reason (but in Thunkable IDE is displayed normally).

I changed the following properties in many different ways without results:

  • Height / Width
  • Picture Resize Mode
  • (Advanced) Max Height / Width
  • (Advanced) Aspect Ratio,
  • (Advanced) Min/Max Height/Width

Any help will be appreciated!

Regards!

Paulo Vaz

1 Like

It’s very difficult to control an image component in a Data Viewer. I would use a row or column and set the background image to show the selected photo.

Thanks @muneer !

Two questions:

  1. It’s possible link the datasource with any image in the DataViewer when we use this image as a column background?

  2. Will be easier to manipulate these images / Dataviewer if I change my project to the DnD interface?

Regards,

Paulo Vaz

UPDATE

Regarding Question #1, Yes, it’s possible to bind Row Background Image to the Dataviewer when you select the Advanced Binding, when creating the DataViewer :slight_smile:

UPDATE 2

The idea of @munner to use backgound picture was nice, but it was also necessary create a “dummy” label and set an absolute height of 350 px in order show the background picture correctly. Look the result:


.
.
.
.


.
.
.
.

1 Like

If I were you I would create a dummy table with one single record only and then bind it to the Data Viewer.

I will then use my code to change the content of the Data Viewer fields. This way I will not need to use Advanced Binding and will only display a single card at a time.