Chat box: problems with HTML!

Hello everybody!

I posted the following message in the chat:
Tag code test: [ code]if (_userdata.session_logged_in) { console.log('Ok!') };[/ code]

And the result is in the picture below:


Note that the HTML of BBCode is outside of the block <span style = "color: #222222"> </ span>

I noticed this problem on various forums, not only on my forum, this also happens with a test forum that I have without any JavaScript added!

The correct way should look like this:


For reference, here's the JSON returned in the message:

Code:


<span style="color: #222222">Tag code test:
    <dl class="codebox contcode">
        <dt>Code:</dt>
        <dd>
            <code>if (_userdata.session_logged_in) { console.log(&apos;Ok!&apos;) }</code>
        </dd>
    </dl>
</span>


JS

Hello @JScript,
Is there a new change which must we do in code?

@Black-Shadow"
What? I think you misunderstand the topic! This problem is in chatbox8.js code, not mine!

---

@Buttercup and/or @The Godfather
The reason of the problem lies in the use of tag <p> that only defines paragraphs!
Not accepting certain tags within it, only the <div> tag that represents a container is that behave any other tag in it!

In this case, the following code snippet in chatbox8.js:

Code:


            for (var j = 0; j < this.messages.length; j++) {
               var message = this.messages[j];
               var html = '<p class=\'chatbox_row_' + (j % 2 == 1 ? 2 : 1) + ' clearfix\'>' + '<span class=\'date-and-time\' title=\'' + message.date + '\'>[' + message.datetime + ']</span>';
               if (message.userId == -10) {
                  html += '<span class=\'msg\'>' + '<span style=\'color:' + message.msgColor + '\'>' + '<strong> ' + message.msg + '</strong>' + '</span>' + '</span>'
               } else {
                  html += '<span class=\'user-msg\'>';
                  if (this.avatar) {
                     html += '\t<span class=\'cb-avatar\'><img src=\'' + message.user.avatar + '\' /></span>'
                  }
                  html += '\t<span class=\'user\' style=\'color:' + message.user.color + '\'>' + '<strong> ' + (message.user.admin ? '@ ' : '') + '<span class=\'chatbox-username chatbox-message-username\'  data-user=\'' + message.userId + '\' >' + message.username + '</span>&nbsp;:&nbsp;' + '</strong>' + '</span>' + '<span class=\'msg\'>' + message.msg + '</span>' + '</span>'
               }
               html += '</p>';
               content += html
            }


It should look like this:

Code:


            for (var j = 0; j < this.messages.length; j++) {
               var message = this.messages[j];
               var html = '<div class=\'chatbox_row_' + (j % 2 == 1 ? 2 : 1) + ' clearfix\'>' + '<span class=\'date-and-time\' title=\'' + message.date + '\'>[' + message.datetime + ']</span>';
               if (message.userId == -10) {
                  html += '<span class=\'msg\'>' + '<span style=\'color:' + message.msgColor + '\'>' + '<strong> ' + message.msg + '</strong>' + '</span>' + '</span>'
               } else {
                  html += '<span class=\'user-msg\'>';
                  if (this.avatar) {
                     html += '\t<span class=\'cb-avatar\'><img src=\'' + message.user.avatar + '\' /></span>'
                  }
                  html += '\t<span class=\'user\' style=\'color:' + message.user.color + '\'>' + '<strong> ' + (message.user.admin ? '@ ' : '') + '<span class=\'chatbox-username chatbox-message-username\'  data-user=\'' + message.userId + '\' >' + message.username + '</span>&nbsp;:&nbsp;' + '</strong>' + '</span>' + '<span class=\'msg\'>' + message.msg + '</span>' + '</span>'
               }
               html += '</div>';
               content += html
            }


With the <div> tag instead of <p>

Result:


JS

Ace 1 wrote:I don't see a difference in the code...

Once again: What?
I regret that you can not see the difference...

---

Please only respond this topic who really can solve it, okay?
It does not help that did not get answer, or do not see any difference, as this will only slow the progress of the solution.

---

Possible solution of the problem: https://help.forumotion.com/t140648-chat-box-problems-with-html#956674

JS

Ok @JScript,
Sorry for misunderstood.

Best Regards,
Black-Shadow.

Someone?


JS

Hello

The problem has been reported to our technicians. Thanks

@Buttercup
Thank you!

Apparently we do not have any answers on the subject?

JS

Hello

I just sent a new email to our technicians I'll let you know

EDIT: Our technicians are currently studying your proposal. They told me you are true but they are not sure they can do it without impacting forums that modify their CSS and templates.

I'll let you know when I have more info

Buttercup wrote:(...)
EDIT: Our technicians are currently studying your proposal. They told me you are true but they are not sure they can do it without impacting forums that modify their CSS and templates.(...)

Okay, I had already noticed this problem with CSS, but if we look at the default values of each version, we can see that the change is minimal:

Spoiler:

Basically just replace the p by div...

JS

Hello Script

I got technicians answer. After studying your proposal they told me you are true. But making this change would create additional problems for all forums with CSS and personalize JS and HTML pages.

The chatbox is very touchy, so we won't take the risk of creating some bugs. However, you're true and our technicians are thankful for your remark

Thanks

@Buttercup
Ok, no problem, so I can publish a JavaScript that corrects this problem for those who wish?
My code corrects the CSS to suit div tag!

JS

Yes you can publish it and even create a short tutorial that we cannot display on our tutorial section (of course if you've enough time )

Thanks for your help