# Formatting Chat messages with/without CSS

**URL:** <https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410>\
**Category:** Ask for Help\
**Created:** [September 2, 2022, 1:27pm UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410 "2022-09-02T13:27:28Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fab3r](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fab3r/32/45722_2.png) [@Fab3r](https://community.glideapps.com/u/Fab3r)\
**Post date:** [September 2, 2022, 1:27pm UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/1 "2022-09-02T13:27:28Z")

</div>

Hello Community, I am here to ask for help about messages.  
I am using a normal inline list for 1:1 Message.  
But I would like to have a Whatsapp Style.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/0/0086e8be9e846ba9cf8120fee1e6946ee1e37fee.png)

So far the idea is to:

- add a tag “Right” when the sender is the registered user
- visualize the tag in the list as “Header” in the inline list
- and use CSS to format lines where the Header is available…

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/3/3383893d21c854e805f446aefdece431b0589403.png)

So far my CSS is:

```auto
<pre><span><style>
.card-header{visibility:hidden; display:none;} /// remove the tag

.bottom-area .card-title-container + .card-subtitle {background-color: #daf4f7;} ///color the subtitle area

.bottom-area .card-title-container + .card-spacer {display:none;visibility:hidden;} /// remove the spacer

.bottom-area .card-title-container + .card-footer {background-color: #daf4f7;}
//color the card-footer area
<style>

```

I would love to have a CSS selector able to evaluate if the header is available and apply float:right to the whole row.  
Do you think it is doable? 🙂

Probably there are better and easier ways, thanks 🙏

---

<div class="post-metadata">

**Author:** ![Fab3r](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fab3r/32/45722_2.png) [@Fab3r](https://community.glideapps.com/u/Fab3r)\
**Post date:** [September 2, 2022, 1:30pm UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/2 "2022-09-02T13:30:23Z")

</div>

This is what I would love to have:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/c/5c007e448f503c8bd4d8364229b752cd75b2ff95.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 2, 2022, 2:19pm UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/3 "2022-09-02T14:19:56Z")

</div>

I think you have the right ideas there, just throwing my 2 cents in:

- Have a series of columns to derive the index of the card (say first one’s index is 0, second one is 1).

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/9/197e87372505efb760fa91f44c28ac5ea458c325.png)

The reason we want to have that is because the card list has a data-index param that we can use to style each card as we want.

- Use an If-Then-Else column like you have to style each card individually (to make them move to the right or left).

- Combine the ITE column result above with the generic CSS you apply for all cards, then I think you should get what you want.

Let us know how it goes, I want to see the result as well!

---

<div class="post-metadata">

**Author:** ![Fab3r](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fab3r/32/45722_2.png) [@Fab3r](https://community.glideapps.com/u/Fab3r)\
**Post date:** [September 2, 2022, 2:56pm UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/4 "2022-09-02T14:56:54Z")

</div>

I am not sure (sorry) I understood the idea of the elements ID and how to write them.  
The main issue is that my “item” is nested inside the main elements and, at the same time, a user can send multiple messages … but maybe that was not your explaination!

This is what I have so far …

```auto
<pre><span><style>

div[role=cell]:has(div.card-title-container)
{float:right;}

div[role=cell]:not(:has(div.card-title-container))
{float:left;}

div.card-title-container{visibility:hidden; display:none;}
<style>

```

And this is the result

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/3/7367e6710ffb08abb125fb8a0fec4fa664172561.png)

I need to change the background colors… and quite done (except for the CSS browsers compatibility…)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 3, 2022, 1:16am UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/5 "2022-09-03T01:16:37Z")

</div>

I think I understand your idea here, did you use a further configuration in CSS to make the “cards” have a width that is less than 100%?

---

<div class="post-metadata">

**Author:** ![Fab3r](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fab3r/32/45722_2.png) [@Fab3r](https://community.glideapps.com/u/Fab3r)\
**Post date:** [September 3, 2022, 9:24am UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/6 "2022-09-03T09:24:55Z")

</div>

Not yet, so far I am using only the 3 lines of codes I posted.  
The idea is to use the inline list “header” based on the ITE “message sender is user\>email” then “Right” (or anything else).

The idea is to use the CSS3 property :has to target a parent (row) when the cart-title-container (aka our header) exists.

Unfortunately CSS3 is not fully supported, so … still in progress. But I will be happy to post the final solution once I will find one 🙂

The 3rd line of the CSS is to remove the header

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 3, 2022, 9:37am UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/7 "2022-09-03T09:37:44Z")

</div>

So how do you change the width of the card? I was not able to reproduce the result shown in your screenshot using the code.

I think I’m pretty close to the solution, just need the width code.

---

<div class="post-metadata">

**Author:** ![Fab3r](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fab3r/32/45722_2.png) [@Fab3r](https://community.glideapps.com/u/Fab3r)\
**Post date:** [September 3, 2022, 9:48am UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/8 "2022-09-03T09:48:25Z")

</div>

If you wish to add the width, you can do it here:

```auto
div[role=cell]:has(div.card-title-container)
{float:right;width:80%;}

```

For the background (if you wish to change it), you need to select a different div, 'cause that one is the full row.

The main issue (for me), is the support to :has, it fully works on Safari and Chrome, no Opera or Android browsers 🙁

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 3, 2022, 3:01pm UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/9 "2022-09-03T15:01:37Z")

</div>

> [@Fab3r](#):
>
> The main issue (for me), is the support to :has, it fully works on Safari and Chrome, no Opera or Android browsers

Yeah, this was pretty recently so can see why they’re still on the experimental stage for many browsers.

I will see what I can get you, probably another route, although your route is much, much more cleaner.

---

<div class="post-metadata">

**Author:** ![Fab3r](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fab3r/32/45722_2.png) [@Fab3r](https://community.glideapps.com/u/Fab3r)\
**Post date:** [September 3, 2022, 3:15pm UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/10 "2022-09-03T15:15:07Z")

</div>

I will try anyway to find a more working way. Thanks for the feedback, please let me know if you can find a better way 🙂

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 4, 2022, 2:13am UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/11 "2022-09-04T02:13:31Z")

</div>

Saving this here in case “:has” becomes a supported thing in the future.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/f/dff84653f01e9cfea3e1fea7b8061ba0d5a61378.jpeg)

```auto
<pre><span><style>

div[class*="vlist"] {
height: auto !important;
}

div[role=cell]:has(div.card-title-container)
{
float: right;
max-width: 80%;
}

div[role=cell]:has(div.card-title-container) .bottom-area
{
background-color: deepskyblue;
}

div[role=cell]:has(div.card-title-container) .card-subtitle
{
color: black;
font-weight: 550;
}

div[role="cell"]:not(:has(div.card-title-container)) {
float: left;
max-width: 80%;
}

div[role=cell]:not(:has(div.card-title-container)) .card-subtitle
{
color: black;
font-weight: 550;
}

.card-title-container {
visibility:hidden;
display:none;
}

</style></span></pre>

```

Browser compability of “:has” as of 4 Sep, 2022.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/3/43262f072d8d092891d283ecf424ffb3c1cceb61.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 4, 2022, 2:53am UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/12 "2022-09-04T02:53:34Z")

</div>

@Fab3r I have successfully compiled a method using my original idea of data-index.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/d/7d8903798a8aa3732acae1c0db78782253d084e5.jpeg)

Basically I use an array method to derive the index of each message, then use an If-Then-Else column and a template column to derive the CSS for each message. Styling things one by one, which generates a much longer code compared to yours, but until :has is supported this would do.

You can find the copyable app here:

> **[Messenger Layout](https://messenger-layout-v9b0.glideapp.io)**

@Robert_Petitto @Jeff_Hager @Darren_Murphy though you would be interested in this for your Chat functions. It’s an inline list, so you can edit/delete at will.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 4, 2022, 3:03am UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/13 "2022-09-04T03:03:55Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/5/85b2b5c2886335580ea6d8633bc33190b5a4d5a7.jpeg)

And now dynamic with images or not (2 additional columns).

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [September 4, 2022, 3:13am UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/14 "2022-09-04T03:13:35Z")

</div>

this sample i made based on CSS cards

> **[Chat App](https://chat-now.glideapp.io/)**
>
> chat for Glide

---

<div class="post-metadata">

**Author:** ![Fab3r](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fab3r/32/45722_2.png) [@Fab3r](https://community.glideapps.com/u/Fab3r)\
**Post date:** [September 4, 2022, 8:54am UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/15 "2022-09-04T08:54:32Z")

</div>

Wow!! Congrats for the result, is very cool! I will copy it immediately 😆  
Thanks for sharing it 🙏

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 4, 2022, 9:21am UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/16 "2022-09-04T09:21:44Z")

</div>

Thanks for your idea! Very cool concept. Let me know if you find any other chances to improve it.

---

<div class="post-metadata">

**Author:** ![Fab3r](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fab3r/32/45722_2.png) [@Fab3r](https://community.glideapps.com/u/Fab3r)\
**Post date:** [September 4, 2022, 10:29am UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/17 "2022-09-04T10:29:04Z")

</div>

I think it’s already wow! At least I can suggest to add a arrow to the tooltip … but, it’s just a fancy small add, and a lot of css to do that 🙂

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [September 5, 2022, 10:29am UTC](https://community.glideapps.com/t/formatting-chat-messages-with-without-css/48410/18 "2022-09-05T10:29:51Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.