Vue JS Chat App UI


Vue JS Chat App UI



Good day everyone!
I am developing a Chat App using Laravel + Laravel Echo + Pusher and Vue JS
all the functionality are fine but I have a problem with the UI.



If you have a new chat, your message will display on the right side and if someone sends a chat on the chatbox, his/her message will display to the left.



I already made the UI







  • {{message.user.firstname}} {{message.user.lastname}} 10:12 AM, Today

    {{message.chat}}

    </li>
    </ul>
    </div>




    • {{message.user.firstname}} {{message.user.lastname}} 10:12 AM, Today

      {{message.chat}}

      </li>
      </ul>
      </div>
      </div>
      </div>



      whenever I make a message, all messages will display on the right, if someone sends a chat, all messages will display on the left.



      Does anyone know how to make my messages display on the right and the other sender messages will display on left?



      Thanks!





      Do you have a question?
      – Phil
      2 days ago





      @Phil i am so sorry, i forgot to write my question. :)
      – Imperatura
      2 days ago





      Why don't you try adding the css property float:right for the mesender div. So that all your messages will be pushed to the right and add float:left for the other div to move them to the left.
      – Arunachalam E
      2 days ago


      float:right


      mesender


      float:left





      thank you so much for your reply. it's working now, CSS is all fine.. i just add an indicator for who sends the message.
      – Imperatura
      2 days ago









      By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

paramiko-expect timeout is happening after executing the command Can someone help me why timeout is happening after executing the command .I am trying to SSH to a machine and execute a command.I want to store the result of the executed command . I have referred paramiko-timeout but i didn't get my expected result. import traceback try: import paramiko except ImportError: raise Exception("Please install paramiko , pip install paramiko") import pexpect from paramiko_expect import SSHClientInteraction def main(): HOSTNAME = "minion5.net" USERNAME = "root" PASSWORD = "help@432" PROMPT = "root@*:~$s+" try: client = paramiko.SSHClient() client.load_system_host_keys() client.set_missing_host_key_policy(paramiko.AutoAddPolicy()) client.connect(hostname=HOSTNAME, username=USERNAME, password=PASSWORD) with SSHClientInteraction(client, timeout=20, display=True) as interact: ...
Read more

Export result set on Dbeaver to CSV

Export result set on Dbeaver to CSV Normally I use Dbeaver for windows and always export my result set like this: run my query --> select the result --> export the result set --> select export to clipboard --> done This step by step puts my result set in my clipboard and I can paste it wherever I want to work with it. The problem is that now I am using dbeaver for mac and this guide is not working. I can go on until the moment that I select my result set like in the image below: exporting data set But once I go further in the process, in the last step I get: no query Note that in "source" it was suppose to show the query that originated the result set, but instead it says just "select. As a result it does't select my result or anything (besides being "successful"). Normally my query would show up there automatically and I couldn't find any option that corrects this problem in the menus. Please help me! Thanks. Aft...
Read more

The forked VM terminated without saying properly goodbye. VM crash or System.exit called

The forked VM terminated without saying properly goodbye. VM crash or System.exit called Please help me to solve this issue. I do not exactly understand what the error in the log means. [INFO] ------------------------------------------------------------------------ [INFO] BUILD FAILURE [INFO] ------------------------------------------------------------------------ [INFO] Total time: 21.749s [INFO] Finished at: Thu Apr 24 10:10:20 IST 2014 [INFO] Final Memory: 15M/37M [INFO] ------------------------------------------------------------------------ [ERROR] Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.15:test (default-test) on project samples.simpleforwarding: Execution default-test of goal org.apache.maven.plugins:maven-surefire-plugin:2.15:test failed: The forked VM terminated without saying properly goodbye. VM crash or System.exit called ? [ERROR] Command wascmd.exe /X /C ""C:Program FilesJavajdk1.7.0_55jrebinjava" -Xmx1024m -XX:MaxPermSize=256...
Read more