Formatting Chat messages with/without CSS

[Fab3r]

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.

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…

So far my CSS is:

<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

[Fab3r]

This is what I would love to have:

[ThinhDinh]

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).

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!

[Fab3r]

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 …

<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

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

[ThinhDinh]

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%?

[Fab3r]

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

[ThinhDinh]

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.

[Fab3r]

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

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

[ThinhDinh]

@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.

[Fab3r]

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

[ThinhDinh]

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

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

[ThinhDinh]

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

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

@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.

[ThinhDinh]

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

[Uzo]

this sample i made based on CSS cards

Chat App

[Fab3r]

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

[ThinhDinh]

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

[Fab3r]

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