Level 75
WIth float you have to use clear
Mar 29, 2021
3
Level 6
css - display inline block and align content to right?
I made a chat box where I can user can send messages. Any messages sent from my end is on the right side of the chat box while other messages from other users will end on the left side.
So, this is how I style it for my messages:
<template>
<div class="alert alert-success notification" role="alert">
{{message}}
</div>
</template>
<script>
export default {
props: [
'message'
]
}
</script>
<style scoped>
.notification {
text-align: right;
margin-bottom: 1em;
display: inline-block;
}
</style>
Using text-align to right will work but I had to fit the text within the content so I added inline-block but the text does not align to the right and aligns to the left. I tried using float:right but while it does works but it overlaps with the subsequent messages that I sent that ends up on the same row.
What property should I use to fix this?
Level 6
It didn't work though because the other user message will overlap in same row as my message.
<div class="card-body scroll">
<div v-for="message in messages" :key="message.id">
<my-message
v-if="message.user == userId"
:message="message.text"
></my-message>
<message
v-if="message.user != userId"
:message="message.text"
:user="message.user"
></message>
</div>
</div>
Are there other alternatives?
Level 75
Then create two types of message.
Please or to participate in this conversation.