Class toggle with repeat element

[mamdi122003]

Hello .

I am trying to change the css of the column with the dynamic value is different:

dmx-class:sendermessage="(serverconnect2.data.queryUser[0].ID_user == serverconnect4.data.repeat1[0].query1[0].SenderID)"

I have been trying for days it is not working. When I write the name of the class to the container. It is working but when I use the class toggle and condition it is not working. I don’t know what exactly I am missing here.

Thank you for your help.

[Teodor]

What exactly are you trying to achieve?

[mamdi122003]

I have this class in the one of the style sheet
.SenderMessage {
background-color: #2FA4E7;
color: #ffffff;
float: left;
border-bottom-left-radius: 0px;
}

I am trying to get class this style when the user ID is equal to sender of the document ID.

So far, I did not reach any of the goal,

[Teodor]

So is this element in a repeat? Can you post the HTML here?
Where are both values you are comparing coming from?

[mamdi122003]

{{TimeStamp}}

{{Message}}

11:25 am

A nice paragraph

[mamdi122003]

How to do you put in html and send you?
The element is the repeat region itself.
Both element have two different serveraction coming from the same database.

[brad]

Surround. your code with three back ticks ```

[Teodor]

How to format code in your posts

Code Formatting When pasting code in your posts, please use the following formatting options, in order to be sure your code is readable and well formatted for the rest of the users. Inline code formatting Surround a section of code with backticks (`) inline code formatting. Typing: `var x = 10;` Results in: var x = 10; This can also be done as var x = 10; inline. Multi-Line Blocks of Code Surrounding code with three backticks ``` will allow for code to span multiple lines Typing: ``` f…

[Teodor]

You have still not formatted the code properly. And also I was referring to the part of the code which is related to your question, not your whole page …

[mamdi122003]

ok!

<div class="order-sm-3 col-sm-12 order-2 col-lg-6 order-lg-1 col-12" id="ChatBox">

                        <div id="HoldMessageHistory">
                            <div class=" chatwrapper" dmx-repeat:messagewrapper="serverconnect4.data.repeat1[0].query1" dmx-class:SenderMessage="(serverconnect2.data.queryUser[0].ID_user == serverconnect4.data.repeat1[0].query1[0].SenderID)">
                                <div class="d-block">
                                    <p class="time-right">{{TimeStamp}}</p>
                                </div>
                                <div class="d-block">
                                    <p>{{Message}}</p>
                                </div>
                            </div>
                            <div class="ReceiverMessage chatwrapper ">
                                <div class="d-block">
                                    <p class="time-right">11:25 am</p>
                                </div>
                                <div class="d-block">
                                    <a><img src="../../images/customertarget.jpg"></a>
                                    <p class="bg-success">A nice paragraph</p>
                                </div>
                            </div>
                        </div>
                    </div>

[Teodor]

I still don’t understand what exactly are you trying to compare.
Is this a single result from a query of a server action compared to a single result from another server action query?
Or is it something else?

[mamdi122003]

Yes,
When the user login, I am using the user ID match with the sender ID.

[mamdi122003]

So, I changed the class to dmx standard class:
using float-right or text-success: The code works. But when use the css I created in the css file: with the custom code> It is not working.

I am guessing the class toggle is not finding the css document on its own.

<div class="order-sm-3 col-sm-12 order-2 col-lg-6 order-lg-1 col-12" id="ChatBox">
                        <div id="HoldMessageHistory">
                            <div class=" chatwrapper" dmx-repeat:messagewrapper="serverconnect4.data.repeat1[0].query1" dmx-class:float-left="(serverconnect2.data.queryUser[0].ID_user == serverconnect4.data.repeat1[0].query1[0].SenderID)">
                                <div class="d-block">
                                    <p class="time-right">{{TimeStamp}}</p>
                                </div>
                                <div class="d-block">
                                    <p>{{Message}}</p>
                                </div>
                            </div>
                            <div class="ReceiverMessage chatwrapper ">
                                <div class="d-block">
                                    <p class="time-right">11:25 am</p>
                                </div>
                                <div class="d-block">
                                    <a><img src="../../images/customertarget.jpg"></a>
                                    <p class="bg-success">A nice paragraph</p>
                                </div>
                            </div>
                        </div>
                    </div> 

[Teodor]

Your class name is using capital letters: SenderMessage while the dynamic class attribute requires using only lowercase.
You can create a class like:

.sender-message {
    background-color: #2FA4E7;
    color: #ffffff;
    float: left;
    border-bottom-left-radius: 0px;
}

and use it with the dynamic class attribute. It will work just fine:

dmx-class:sender-message="(serverconnect2.data.queryUser[0].ID_user == serverconnect4.data.repeat1[0].query1[0].SenderID)"

[mamdi122003]

Thank you. I did it and it works