Text Output Strange
MyBigNurse opened this issue · 13 comments
Hi - sorry, this is probably a silly question because this is my first time w/ Elixir but i followed this example and the output is weird in that each time a user enters an output it puts the output adjacent (rather than below with a line break), which makes the messages impossible to read... For example a typical output on my end looks like:
Bob hi there. Alice Hello How are you? Bob I'm good, and you? Alice I'm good and you.
Maybe this is intended but ideally I would like the output to read as so (I believe with
line break or something of the sort) -
Bob hi there.
Alice Hello How are you?
Bob I'm good, and you?
Alice I'm good and you.
Now I thought the code that controlled this was app.js. I'm no expert with JS, but I tried every possible iteration of adding in a line break into channel.on as well as msg.addEventListener ... and no matter what the line breaks don't appear to show up in the code (not sure if this is because they are getting wrapped inside "li.. /li" elements).
Could you please suggest how to adjust this so that every record from the DB is separated with a line break?
I thought something like the following addition of a "br" element would work, but it does not -
channel.on('shout', function (payload) {
var li = document.createElement("li");
var name = payload.name || 'guest';
li.innerHTML = '
' + name + ': ' + payload.message + '
';
ul.appendChild(li);
ul.appendChild(document.createElement("br"));
});
Also, thanks btw for posting this example. I thought it was quite interesting!
Also I noticed a difference in the definition you see in the tutorial, which says the .JS should look as follows:
Example A
channel.on('shout', function (payload) { // listen to the 'shout' event
var li = document.createElement("li"); // creaet new list item DOM element
var name = payload.name || 'guest'; // get name from payload or set default
li.innerHTML = '' + name + ': ' + payload.message; // set li contents
ul.appendChild(li); // append to list
});
versus what you see in the following file -
https://github.com/dwyl/phoenix-chat-example/blob/master/assets/js/app.js
which says:
Example B
var channel = socket.channel('room:lobby', {}); // connect to chat "room"
channel.on('shout', function (payload) { // listen to the 'shout' event
if (document.getElementById(payload.id) == null) { // check if message exists.
var li = document.createElement("li"); // creaet new list item DOM element
li.id = payload.id
console.log(payload)
var name = payload.name || 'guest'; // get name from payload or default
li.innerHTML = '
' + name + ': ' + payload.message + '
';
ul.appendChild(li); // append to list
}
});
The second example, Example B, looks like what I would expect would cause each Message to be entered on a newline. However, the output Example B leads to only the first database entry being displayed, and no other database records are shown.
In Example B, the code returns the multiple records from the database, however, as mentioned before they are all adjacent (and when you get a few messages you can't tell who is saying what).
Also I notice that in Example B, the if() statement is what is causing only the first db record to evaluate true and be shown, while all other records evaluate to false (even though they have non-null ids).
if (document.getElementById(payload.id) == null)
It appears to me maybe the issue with the line chars has to do with the file app.html.eex file in templates/layout/... as when I remove the following line: <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/> ... it seems to allow the chat text to go onto new lines ... but it also makes the formatting/style of the page really unpleasant.
@MyBigNurse this appears to be a CSS bug. thank you for reporting it. 👍
Thanks, Nelson. Sorry but I don’t know much about how css works in elixiror what exactly this app.css ref is doing. Do you have a suggestion on what file I need to look at to try and fix it? Is it in the app.css file? Thanks for your reply
@MyBigNurse yeah, app.css should be a good place to start.
@Cleop or @RobStallion might be able to help.
Can you upload a screenshot of what you are seeing?
@MyBigNurse yeah, app.css should be a good place to start.
@Cleop or @RobStallion might be able to help.
Can you upload a screenshot of what you are seeing?
Thanks guys - just uploaded a screenshot of what it looks like.
So I opened up chat/priv/static/css/app.css and I removed the following section of code.
The first line of code in the CSS file looks like:
,:after,*:before{box-sizing:inherit}html ....
And it is this super massive and impossible to read entry of css. By randomly deleting sections i was able to see that removing the following text:
"{display:inline}.label-inline{display:inline-block;font-weight:normal;margin-left:.5rem}"
that this appears to fix the problem of centering entries. However, a few questions about this. First, while removing this little snippet appears to fix the problem, I'm not sure where this section begins or ends, and not sure if removing just this little part (and not a longer portion) is not breaking something else in the CSS.
Secondly, can someone explain how this massive statement in the CSS was generated in the first place? Is there some tool that was used for building this? Because I cannot imagine anyone wrote this line of code by hand (it seems far to long to have been manually generated). It would just be helpful to know how this CSS is being created so that I can make my own CSS file.
@MyBigNurse could you create a repo that you could push this code to? It would be helpful if I could look at your code as I cannot replicate your error in the demo version.
If you could also comment letting us know what browser you are using that would be helpful. 👍
This is a CSS issue.
Phoenix 1.4 now includes Milligram for styling, not Bootstrap as in previous versions. So, a newly generated project will not work like the one in the repo.
The template in Step 3 will have to be modified accordingly for Milligram.
Also Webpack is now used instead of Brunch for handling static assets.
I was able to improve the output by removing "class='row'" from line 2 in index.html.eex.
<ul id='msg-list' class='row' style='list-style: none; min-height:200px; padding: 10px;'>
to
<ul id='msg-list' style='list-style: none; min-height:200px; padding: 10px;'>
Updated in:
Thanks again @LatitudeAdjustment 🥇