# Alternating color chat in Drag & Drop?
**URL:** https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166
**Category:** Questions about Thunkable X
**Created:** [January 11, 2022, 7:31pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166 "2022-01-11T19:31:17Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 11, 2022, 7:31pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/1 "2022-01-11T19:31:17Z")
Any thoughts about how to make color-coded text messages based on sender?
I’m storing usernames and message strings in Firebase and want the output to look something like this:
[ ](https://www.textrequest.com/media/4236/text-message-signature-example.png)
In the Snap to Place (StP) interface, I could clone blocks with different properties or use a Data Viewer List (DVL) and change the properties of individual elements but in the Drag & Drop (DnD) interface, I don’t have either of those options.
Is there another way?
---
### Author:  [@jared](https://community.thunkable.com/u/jared)
#### Post date: [January 11, 2022, 10:27pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/2 "2022-01-11T22:27:23Z")
But you do have that option
> [@tatiang](#):
>
> Data Viewer List (DVL) and change the properties of individual elements but in the Drag & Drop (DnD) interface, I don’t have either of those options.
But @tatiang you do have those options, it’s just not always apparent! 😃 😀 😄
Check out [this](https://x.thunkable.com/projectPage/61cdef060452400010879fbd) project! Specifically go to the screen ‘scr View notes’ and check out the blocks. I use the DVL without ever entering data into the table. I also manipulate the DVL components manually and apply values to them directly from a firebase call!
So, you’d make 1 chat row that has both left and right chat box with the correct color and based on who the logged in user is and the id associated with the message, color the boxes accordingly!
All of this nonsense aside, I can’t wait until we get cloning blocks back into drag and drop
---
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 11, 2022, 10:56pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/3 "2022-01-11T22:56:30Z")
I was confusing List Viewers and Data Viewer Lists. I’ll swap it out for a DVL. Thanks!
**Edit:** This is an impressive demo! Many thanks!
---
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 12, 2022, 1:59am UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/4 "2022-01-12T01:59:41Z")
@jared I’m happy with the results so far:
I still need to adjust the custom DVL layout sizing since it’s cutting off the messages but I was focused on the player name colors and that’s working great.
I’m using a row with two labels inside. The row is set to “fit contents” for the height and each label is as well. But they don’t expand to fit longer messages. Any ideas why?
---
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 12, 2022, 4:36pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/5 "2022-01-12T16:36:09Z")
This topic seems like it might steer me in the right direction although it’s using the Snap to Place interface:
> [@Making better chat apps with the "Any Component" blocks](https://community.thunkable.com/t/making-better-chat-apps-with-the-any-component-blocks/151783):
>
> Thanks to @eoinparkinson who suggested this as an idea for a tutorial User Interface. The UI for this app is very simple. The OutputColumn is initially empty, with vertical alignment set to flex end. This is eventually where all the chat bubble will go. Under that is the inputRow which is used to place the test input and the send button side-by-side. Finally, outside all of this, are two labels; RightLabel and LeftLabel. Although I’ve shown them in the screenshot below, their visibility is se…
The image @domhnallohanlon posted in that topic is basically what I’m trying to make work with a custom DVL layout:
I tried setting the Positioning properties the same as in that demo but it still doesn’t expand or wrap the text in my DVL rows:
---
### Author:  [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 12, 2022, 4:55pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/6 "2022-01-12T16:55:04Z")
> [@tatiang](#):
>
> setting the Positioning properties
Why do you need the `Advanced Properties`. Isn’t just **Fit contents** for the row which will make it respond to the size of the `Label` inside it.
---
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 12, 2022, 4:56pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/7 "2022-01-12T16:56:05Z")
I’ve tried Fit contents for the row and for the labels inside. It doesn’t expand.
---
### Author:  [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 12, 2022, 5:26pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/8 "2022-01-12T17:26:09Z")
This is my attempt in StP
This is in DnD
---
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 12, 2022, 5:29pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/9 "2022-01-12T17:29:52Z")
Looks great! Is it using a DVL? If so, would you mind sharing the project that has the layout?
---
### Author:  [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 12, 2022, 5:31pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/10 "2022-01-12T17:31:55Z")
Project in StP with layout
[https://x.thunkable.com/projectPage/61df08d9e3e9530010050267](https://x.thunkable.com/projectPage/61df08d9e3e9530010050267)
This is DnD using the layout
[https://x.thunkable.com/projectPage/61df0e18e3e9530010050325](https://x.thunkable.com/projectPage/61df0e18e3e9530010050325)
You need to save the layout in your account and use `Row1` to save it.
For testing purposes, I created a local table and populated it with sample data.
---
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 12, 2022, 5:44pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/11 "2022-01-12T17:44:54Z")
I don’t see the layout in that project. Just the DVL itself and a title label.
---
### Author:  [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 12, 2022, 5:59pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/12 "2022-01-12T17:59:48Z")
> [@tatiang](#):
>
> I don’t see the layout in that project
Truly sorry. I copied the DnD project by mistake. I corrected the post. You should see both StP and DnD.
---
### Author:  [@jared](https://community.thunkable.com/u/jared)
#### Post date: [January 12, 2022, 9:33pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/13 "2022-01-12T21:33:39Z")
looks like a great start! How cool that when the label doesn’t have text, nothing shows!
---
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 12, 2022, 10:07pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/14 "2022-01-12T22:07:12Z")
Thanks, @muneer! It’s working. I’m still not sure why mine didn’t but at least I have something to work with now. Any particular reason you used two rows instead of one?
---
### Author:  [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 13, 2022, 1:24am UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/15 "2022-01-13T01:24:51Z")
> [@tatiang](#):
>
> Any particular reason you used two rows instead of one?
From experience, if you use only one `row` then you will need to use the magical **wait block** when manipulating the rows at run time just like what we do for cloning. When you use two `rows` inside each other it works without the **wait block**.
---
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 13, 2022, 6:31am UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/16 "2022-01-13T06:31:10Z")
I think I’ve settled on this layout:
---
### Author:  [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 13, 2022, 9:42am UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/17 "2022-01-13T09:42:50Z")
I agree.
It looks professional and cool at the same time. 👍
---
### Author:  [@rishabh\_jain](https://community.thunkable.com/u/rishabh_jain)
#### Post date: [January 18, 2022, 10:07am UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/18 "2022-01-18T10:07:09Z")
But how will you code the chat app because i am now also stuck in designing
The chat screen
---
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 18, 2022, 12:39pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/19 "2022-01-18T12:39:48Z")
I save each chat message in a Firebase object that has the player name and message. Then I loop through that list every split second and populate a Data Viewer List with a custom layout where I change each row’s background color according to which player name it contains.
If you’re new to Thunkable, you can search for chat video tutorials and demo projects.
---
### Author:  [@rishabh\_jain](https://community.thunkable.com/u/rishabh_jain)
#### Post date: [January 18, 2022, 4:01pm UTC](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166/20 "2022-01-18T16:01:40Z")
ok thank you
[Next page](https://community.thunkable.com/t/alternating-color-chat-in-drag-drop/1670166.md?page=2)