Welcome Guest, Not a member yet? Register   Sign In
Simple chat facility - if file exists not working
#11

Okay, that's an CSS issue. Should not be solved with JavaScript.
In those stackoverflow (linked above) you got the following solution; https://codepen.io/jimbol/pen/YVJzBg

I have used something similar. Just append your latest message at the top in the DOM and it will work just fine.
Reply
#12

(07-05-2020, 10:52 PM)jreklund Wrote: Okay, that's an CSS issue. Should not be solved with JavaScript.
In those stackoverflow (linked above) you got the following solution; https://codepen.io/jimbol/pen/YVJzBg

I have used something similar. Just append your latest message at the top in the DOM and it will work just fine.

Thanks jreklund, yes that did the trick. For the sake of others who might be wanting the scroll bar to the bottom this is the coding;
PHP Code:
<style type="text/css"> .mem {position:fixedwidth:53%; left:46%; top:30%; font-familyarialfont-size100%; colorBlackbottom7%; overflowautodisplayflexflex-directioncolumn-reverse;}</style
Reply
#13

(07-05-2020, 10:52 PM)jreklund Wrote: Okay, that's an CSS issue. Should not be solved with JavaScript.
In those stackoverflow (linked above) you got the following solution; https://codepen.io/jimbol/pen/YVJzBg

I have used something similar. Just append your latest message at the top in the DOM and it will work just fine.

I spoke too soon. This is not working the way I expected. I dont want the messages in the column to be reversed. I want the bottom message to remain on the bottom but the scroll bar to be at the bottom, so that the bottom message is displayed when the page is opened.

Another problem I foresee is that Id like the incoming messages to be in "color: Red" and the outgoing messages in "color: Black". Should that be done in the Controller or the view? The "To" and "From" messages are distinguished in the Controller but not in the view.
Reply
#14

That's the only way I know it, you need to render your DOM incorrectly and fix the order with flex.

Apply a class to that message, and style it that way.
Reply
#15

(07-06-2020, 02:37 PM)jreklund Wrote: That's the only way I know it, you need to render your DOM incorrectly and fix the order with flex.

Apply a class to that message, and style it that way.

I dont know what you mean by "render your DOM 'incorrectly' and fix the order with flex" and "Apply a class to that message, and style it that way".

Can you expand?

I have played around with the flex coding but nothing works. I can tolerate the messages being reversed but then I would want the scroll bar to be at the top.
Reply
#16

(07-06-2020, 02:37 PM)jreklund Wrote: That's the only way I know it, you need to render your DOM incorrectly and fix the order with flex.

Apply a class to that message, and style it that way.

I found the solution for the scroll bar as follows;
PHP Code:
<style type="text/css"> .mem {position:fixedwidth:53%; left:46%; top:30%; font-familyarialfont-size100%; colorBlackbottom7%; overflowautodisplayflexflex-directioncolumn-reverse;}</style>
    <
div class="mem"><div>
Just a matter of adding the <divat the end
But I still need to learn how to add the colors to the "incoming" and "outgoing" messages.
Reply
#17

Just check the codepen shared earlier, Bottom are the first child in container DOM, but appears to the users in the Bottom, with flex.

<div class="message you">I just sent you this</div>
<div class="message other-dude">Got this in return</div>

.you { color: black;}
.other-dude { color: red; }
Reply




Theme © iAndrew 2016 - Forum software by © MyBB