How To Align Username Outside The Bubble In Chat?
I need to put the user's name on top of the message box, just like it is on Messenger, but I'm not getting it, I've tried using position several times and I can't, someone could he
Solution 1:
.me {
float: left;
clear: both;
color: black;
margin: 2px;
padding: 10px;
}
p.msgs {
margin-top: 5px;
margin-bottom: 0;
padding: 1rem2rem;
border-radius: 30px;
border: 1px solid #000;
background-color: yellow;
}
p.name {
margin-bottom: 5px;
margin-left: 10px;
}
.sender-img-box {
border-radius: 50%;
width: 30px;
height: 30px;
margin-top: auto;
overflow: hidden;
margin-bottom: 5px;
}
img.sender-img {
width: 30px;
height: 30px;
display: flex;
vertical-align: bottom;
}
div.sender-text {
margin-left: 10px;
}
.msg-box {
display: flex;
flex-direction: row;
}<!DOCTYPE html><html><head></head><body><divclass="me"><pclass="name">Alex</p><pclass="msgs">This is a hidden message</p></div><divclass="me"><pclass="name">David</p><pclass="msgs">This is my first message</p><pclass="msgs">This is my second message</p></div><divclass="me msg-box"><divclass="sender-img-box"><imgclass="sender-img"src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"alt=""
/></div><divclass="sender-text"><pclass="name">Alex</p><pclass="msgs">This is a hidden message</p></div></div></body></html>Solution 2:
Just surround it in another layer of <div> like so:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divclass="messagecontainer">
John Doe<br><divclass="me"><span>This is a hidden message</span></div></div><br><br><br><divclass="messagecontainer">
Jane Doe<br><divclass="me"><span>Please tell me how to make it</span></div></div><br><br><br></body></html>Gives the following result:
.me{
float: left;
clear: both;
color:black;
background-color:yellow;
margin:2px;
border-radius:30px;
padding: 10px;
display: inline-block;
}
.messagecontainer{
text-align:start;
}<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divclass="messagecontainer">
John Doe<br><divclass="me"><span>This is a hidden message</span></div></div><br><br><br><divclass="messagecontainer">
Jane Doe<br><divclass="me"><span>Please tell me how to make it</span></div></div><br><br><br><divclass="messagecontainer">
Aniox<br><divclass="me"><span>Ok</span></div></div><br><br><br></body></html>
Post a Comment for "How To Align Username Outside The Bubble In Chat?"