# Custom data list viewer, Border

**URL:** <https://community.thunkable.com/t/custom-data-list-viewer-border/1215641>\
**Category:** Questions about Thunkable X\
**Created:** [April 9, 2021, 10:34pm UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641 "2021-04-09T22:34:46Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![andreas.sjdtomypv](https://avatars.discourse-cdn.com/v4/letter/a/e5b9ba/32.png) [@andreas.sjdtomypv](https://community.thunkable.com/u/andreas.sjdtomypv)\
**Post date:** [April 9, 2021, 10:34pm UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/1 "2021-04-09T22:34:47Z")

</div>

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!!!

 ![Screenshot 2021-04-10 at 00.25.05](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/7/478122b54526a137e01b8067a766ddb8a2ca118f.png) ![IMG_4874](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/8/58845dc266b744a85a26ae8d027fca82c08998df.jpeg)

---

<div class="post-metadata">

**Author:** ![tony.ycy.program](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tony.ycy.program/32/100153_2.png) [@tony.ycy.program](https://community.thunkable.com/u/tony.ycy.program)\
**Post date:** [April 10, 2021, 2:02am UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/2 "2021-04-10T02:02:02Z")

</div>

> [@andreas.sjdtomypv](#):
>
> 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

Are you using a data display or a list display

---

<div class="post-metadata">

**Author:** ![andreas.sjdtomypv](https://avatars.discourse-cdn.com/v4/letter/a/e5b9ba/32.png) [@andreas.sjdtomypv](https://community.thunkable.com/u/andreas.sjdtomypv)\
**Post date:** [April 10, 2021, 6:10am UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/3 "2021-04-10T06:10:36Z")

</div>

Thanks, I’m using list…

---

<div class="post-metadata">

**Author:** ![tony.ycy.program](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tony.ycy.program/32/100153_2.png) [@tony.ycy.program](https://community.thunkable.com/u/tony.ycy.program)\
**Post date:** [April 10, 2021, 6:10am UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/4 "2021-04-10T06:10:52Z")

</div>

Ok can you share your program

---

<div class="post-metadata">

**Author:** ![andreas.sjdtomypv](https://avatars.discourse-cdn.com/v4/letter/a/e5b9ba/32.png) [@andreas.sjdtomypv](https://community.thunkable.com/u/andreas.sjdtomypv)\
**Post date:** [April 10, 2021, 6:23am UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/5 "2021-04-10T06:23:28Z")

</div>

Do you mean to share the project?

---

<div class="post-metadata">

**Author:** ![tony.ycy.program](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tony.ycy.program/32/100153_2.png) [@tony.ycy.program](https://community.thunkable.com/u/tony.ycy.program)\
**Post date:** [April 10, 2021, 6:50am UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/6 "2021-04-10T06:50:40Z")

</div>

Yeah

---

<div class="post-metadata">

**Author:** ![andreas.sjdtomypv](https://avatars.discourse-cdn.com/v4/letter/a/e5b9ba/32.png) [@andreas.sjdtomypv](https://community.thunkable.com/u/andreas.sjdtomypv)\
**Post date:** [April 10, 2021, 11:13am UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/7 "2021-04-10T11:13:00Z")

</div>

ok, yea sure:  
[https://x.thunkable.com/copy/fe28cc8f2917f395f2724e64797ef79c](https://x.thunkable.com/copy/fe28cc8f2917f395f2724e64797ef79c)

//

---

<div class="post-metadata">

**Author:** ![tony.ycy.program](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tony.ycy.program/32/100153_2.png) [@tony.ycy.program](https://community.thunkable.com/u/tony.ycy.program)\
**Post date:** [April 10, 2021, 12:54pm UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/8 "2021-04-10T12:54:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![andreas.sjdtomypv](https://avatars.discourse-cdn.com/v4/letter/a/e5b9ba/32.png) [@andreas.sjdtomypv](https://community.thunkable.com/u/andreas.sjdtomypv)\
**Post date:** [April 10, 2021, 1:28pm UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/9 "2021-04-10T13:28:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tony.ycy.program](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tony.ycy.program/32/100153_2.png) [@tony.ycy.program](https://community.thunkable.com/u/tony.ycy.program)\
**Post date:** [April 10, 2021, 1:29pm UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/10 "2021-04-10T13:29:48Z")

</div>

I think he is pretty good.

---

<div class="post-metadata">

**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\
**Post date:** [April 10, 2021, 1:42pm UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/11 "2021-04-10T13:42:24Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![andreas.sjdtomypv](https://avatars.discourse-cdn.com/v4/letter/a/e5b9ba/32.png) [@andreas.sjdtomypv](https://community.thunkable.com/u/andreas.sjdtomypv)\
**Post date:** [April 10, 2021, 2:35pm UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/12 "2021-04-10T14:35:27Z")

</div>

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 😊, actually my next step in development is to find another font 😉 so, I totally agree with you…

---

<div class="post-metadata">

**Author:** ![andreas.sjdtomypv](https://avatars.discourse-cdn.com/v4/letter/a/e5b9ba/32.png) [@andreas.sjdtomypv](https://community.thunkable.com/u/andreas.sjdtomypv)\
**Post date:** [April 10, 2021, 2:38pm UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/13 "2021-04-10T14:38:03Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/e/8e54e655091478855617fa5a59fec9c05f6724db.jpeg)

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!!

---

<div class="post-metadata">

**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\
**Post date:** [April 10, 2021, 3:06pm UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/14 "2021-04-10T15:06:31Z")

</div>

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](https://x.thunkable.com/copy/c763fb4a1754ea63353d587285fce13c)

 ![IMG_17311](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/7/578f47e32d343ddf71ddadd3d9c8e2687a9361b4.png)

---

<div class="post-metadata">

**Author:** ![andreas.sjdtomypv](https://avatars.discourse-cdn.com/v4/letter/a/e5b9ba/32.png) [@andreas.sjdtomypv](https://community.thunkable.com/u/andreas.sjdtomypv)\
**Post date:** [April 10, 2021, 6:06pm UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/15 "2021-04-10T18:06:54Z")

</div>

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?

Thanks

---

<div class="post-metadata">

**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\
**Post date:** [April 10, 2021, 6:19pm UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/16 "2021-04-10T18:19:25Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![andreas.sjdtomypv](https://avatars.discourse-cdn.com/v4/letter/a/e5b9ba/32.png) [@andreas.sjdtomypv](https://community.thunkable.com/u/andreas.sjdtomypv)\
**Post date:** [April 10, 2021, 7:50pm UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/17 "2021-04-10T19:50:28Z")

</div>

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!!

---

<div class="post-metadata">

**Author:** ![andreas.sjdtomypv](https://avatars.discourse-cdn.com/v4/letter/a/e5b9ba/32.png) [@andreas.sjdtomypv](https://community.thunkable.com/u/andreas.sjdtomypv)\
**Post date:** [April 10, 2021, 8:01pm UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/18 "2021-04-10T20:01:26Z")

</div>

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 😊

---

<div class="post-metadata">

**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\
**Post date:** [April 10, 2021, 9:04pm UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/19 "2021-04-10T21:04:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [April 10, 2021, 9:18pm UTC](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641/20 "2021-04-10T21:18:11Z")

</div>

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.

[Next page](https://community.thunkable.com/t/custom-data-list-viewer-border/1215641.md?page=2)
