Text Output Strange about phoenix-chat-example HOT 13 CLOSED

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;'>

from phoenix-chat-example.

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

from phoenix-chat-example.

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.

from phoenix-chat-example.

from phoenix-chat-example.

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

from phoenix-chat-example.

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.

from phoenix-chat-example.

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

from phoenix-chat-example.

Also, thanks btw for posting this example. I thought it was quite interesting!

from phoenix-chat-example.

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 + '

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)

from phoenix-chat-example.

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.

from phoenix-chat-example.

@MyBigNurse this appears to be a CSS bug. thank you for reporting it. 👍

from phoenix-chat-example.

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

from phoenix-chat-example.

Updated in:

Thanks again @LatitudeAdjustment 🥇

from phoenix-chat-example.