Custom data list viewer, Border

Hi. I have made an custom data list viewer layout. I want these “dividing-lines” between the rows but I don’t know how to get these so I added a bottom border on the “original” row from the screen where I created this layout. It works fine and looks good in the web platform and simulators, but looking on my iPhone with the live app they are not there. Is there anyone who can give some guidance regarding this? Thanks!!!

1 Like

Are you using a data display or a list display

Thanks, I’m using list…

Ok can you share your program

Do you mean to share the project?


ok, yea sure:


I can’t think of it, you can ask @tatiang

Ok sure, why tatiang? Has he something with the feature to do?

I think he is pretty good.

I just edited your project and it has the horizontal lines when I view with my iPhone with Thunkable Live. Go back to your screen 2 where you defined your dataviewer. Click the row. Click the “advanced” tab. Under styling, add a border on the bottom of the row - be sure to set the color for the border, too. THEN, save the new data viewer and go back to screen 1. You’ll need to switch to the new viewer (it’ll be all the way at the end of the choices), and then re-connect your column 1.

Try it out - holler if you get stuck!

p.s. I /love/ the chalkboard style. I wonder if there’s a font that would look more like handwriting available, at least on iOS…

1 Like

Hi, thanks for your answer .actually this is exactly what I have done, but for me and my iPhone XR these lines doesn’t show…

Thanks, I like that charcoal style as well :blush:, actually my next step in development is to find another font :wink: so, I totally agree with you…

This is the look at the moment, so if you done any changes that works for you I’d didnt for me I’m afraid, but thanks!!

Hmm. I wonder if you missed a setting. I’ll open your project again and share it back to you with the line working on my iPhone.

Try this. Adding the white border (what you wanted, right?) works on both my small iphone AND my ipad, although neither is an XR. Thunkable

Hi, yes, I must have missed something…
This is what I have dom:

  1. I created a new screen
  2. Added a row
  3. Added a label in that row
  4. Put that row at top
  5. Changed font size, font color, fon weight
  6. put som margin/padding
  7. went to “advanced settings” for that row, then style, then added Border line Bottom (1).
  8. BorderColor - bottomBorderColor = White
  9. Saved as layoutTemplate data view List.
  10. reconnected column 1.

…Does it feels like I am forgetting some step for you?


Did you actually tell your data viewer to use that layout template (which would have forced you to “reconnect”)? That’d be my first guess.

I also had the border set to 2 wide, not 1 wide, but I don’t think it’d matter.

Does my code linked above display properly for you?

now I got your link to show, it works! I think I didn’t viewed the correct version on my phone earlier.
I believe I see what I did wrong now. I put the border on the label, not the row. Thanks a lot for your help!!

1 Like

May I ask, do you know if there is any way to delete old “custom data viewer list layouts”? It has been a few now :blush:

1 Like

If you find out, I’d like to know too! :slight_smile:

Check in your main Thunkable screen. You will see a tab for custom layouts just as there are tabs for data sources and saved screens. In the tab you have the ability to delete.