I am working on trying to make a chat app and need chat bubbles to tightly fit around their content. It works alright for text, but when I have an image in the bubble it gets problematic. Here is the HTML that I am using
<div class="fromMe msgBubble">
<img src="{{image.location}}" style="width:50%;">
<br>
<span class="msgDate">2011-01-26 01:52:16</span>
</div>
<div class="clearfix"></div>
However, when I load the image I have a whole bunch of padding off to the side of the image, and the div doesn't tightly wrap around the image. It looks like this:
http://imgur.com/R3j7yO2
UPDATE: I posted a JS Fiddle with the code and CSS.
https://jsfiddle.net/dw9aek2y/
How can I tight fit the chat bubble div around the picture?
Thanks!
Remove width and add max-width and every thing will be fine
#messageBubbleArea {
font: 14px Arial;
margin-top: 20px;
padding: 0 10px;
width: 99%;
}
.fromMe::before {
border-bottom: 9px solid #0b93f6;
border-right: 9px solid rgba(0, 0, 0, 0);
bottom: 0;
content: "";
position: absolute;
right: -8px;
}
*::after, *::before {
box-sizing: border-box;
}
.fromMe {
background-color: #0b93f6;
border-radius: 8px 8px 0;
color: white;
float: right;
margin-left: auto;
text-align: right;
}
.fromThem, .fromMe {
clear: both;
margin-top: 20px;
max-width: 80%;
padding: 5px 9px;
position: relative;
}
<div id="messageBubbleArea">
<div class="fromMe msgBubble">Hey babe<br>
<span class="msgDate">2011-01-26 00:09:30</span>
</div>
<div class="clearfix"></div>
<div class="fromMe msgBubble">
<img style=" max-width:200px;" src="http://images.clipartpanda.com/rainbow-clip-art-rainbow.gif"><br>
<span class="msgDate">2011-01-26 01:52:16</span>
</div>
<div class="clearfix"></div>
</div>
Related
I am trying to do the following in the image: The top div will contain text of variable length. The bottom div is fixed in place and should respond by resizing its height to avoid the overlap, while overflowing the text if needed. Is there a way to do this in CSS? I have attached the jsfiddle.
https://jsfiddle.net/0nr3g7kq/123/
* {
font-family: Arial, Helvetica, sans-serif;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 20px;
padding: 5px;
width: 300px;
height: 145px;
position: relative;
}
.content1,
.content2 {
border-style: dotted;
border-width: 2px;
border-color: blue;
margin: 1px;
width: 268px;
}
.content2 {
position: absolute;
bottom: 20px;
}
.title {
font-weight: bold;
}
.desc {}
<div class="card">
<div class="content1">
<span class="title">
This top div should compress the bottom div downwards without changing its position.
</span>
</div>
<div class="content2">
<span class="desc">
This bottom div should respond by being compressed and show 1 less visible line with text overflow but not change position
</span>
</div>
</div>
Just add min-width:268px; to .content1, .content2 it will solve current problem
put max-width: instead of width: in .content1, .content2 and remove .content2 { position: absolute; bottom: 20px; }
My button margin isn't fitting into my div. Here's the relevant HTML and CSS.
.card {
justify-content: flex-start;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
margin: 8px;
}
.card {
margin-bottom: 16px;
padding: 0px 8px;
float: left;
}
.button {
border: none;
padding: 8px;
color: white;
background-color: black;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: #555;
}
.title {
color: grey;
}
.container {
padding: 0px 16px;
}
.card > img {
width: 100%;
}
<div class="ccard">
<div class="card">
<img src="https://pbs.twimg.com/profile_images/1115280588322295808/N1mHLfHy_400x400.png" alt="Jane">
<div class="container">
<h2>Jane Doe</h2>
<p class="title">CEO & Founder</p>
<p>Jane has had 9 years of experience in the tech industry and knows it like the back of her hand. She's very warm and welcoming towards new customers.</p>
<p>janedoe#cabbagedude.com</p>
<p>
<button class="button">Contact</button>
</p>
</div>
</div>
</div>
It has always worked for me before, but it doesn't work now. I also haven't changed anything, except by adding the class ccard around card.
Here's what it looks like for me.
You need to add box-sizing: border-box; to all relevant elements in order to include borders and paddings (I suppose you mean those, since you don't have any margin on the button) in the given width, otherwise they are added to the width, which causes overflow if the width is 100%.
I'm building a React Chat app. My background of messages works fine with a short text. The background responsively changes according to text-content.
With longer text, when I scale the browser, there are certain points where the background appears larger than the fit-content. Below are the pictures of the same message.
No Gap
With Gap
Here is my React code:
<div className={`chatMessage ${message.sender._id === state._id && "myMessage"}`}>
<div className="messageHeader">
<span className="chatName"> {message.sender.name} </span>
<span className="timeStamp"> {message.timestamp.substring(0, 10)} </span>
</div>
<div className="messageContent">
<span>{message.message}</span>
<small className="timeStamp"> {message.timestamp.substring(12, 20)} </small>
</div>
</div>
Here is my CSS:
.chatMessage {
display: flex;
height: auto;
position: relative;
font-size: 16px;
padding: 2px 10px 0px 10px;
max-width: 350px;
margin-bottom: 10px;
}
.myMessage > .messageContent {
background-color: #dcf8c6 !important;
}
.chatMessage > .messageContent {
background-color: rgb(221, 221, 221);
}
.messageContent {
position: relative;
bottom: 25px;
padding: 2px 10px 0px 10px;
border-radius: 10px;
right: -5px;
}
I believe the max-width property is causing the problem. But I can't figure out how to work around it.
I have two inline elements within a div. One element is floated to the left and the other to the right. I have used absolute positioning to place the block containing inline elements at the bottom of a DIV.
Problem: The element floating to the right skews out of its container. How can I fix this so that it stays within its container? Here is the CodePen.
HTML
<div class="posts__post">
<article>
<a class="posts__post--preview" href=""><img src="http://lorempixel.com/470/310/food" /></a>
<a class="posts__post--title" href=""><h1>Bryce Canyon A Stunning U.S Travel Destination</h1></a>
<div class="posts__post--meta">
<a class="posts__post__timestamp"><i class="fa fa-clock-o" aria-hidden="true"></i>10 days ago</a>
<a class="posts__post__tag">Motivation</a> <!-- element floating out --->
</div>
</article>
</div>
SCSS
.posts__post{
height: 400px;
width: 310px;
margin: 40px auto;
//margin-bottom: 40px;
position: relative;
text-align: left;
background-color: white;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
.posts__post--preview img{
width: 100%;
height: auto;
border-radius: 5px 5px 0px 0px;
}
.posts__post--tag{
font-size: em(15);
font-weight: bold;
color: $light-grey;
}
.posts__post--meta{
color: $light-grey;
position: absolute;
bottom: 25px;
left: 0;
display: block;
}
.posts__post--title, .posts__post--tag, .posts__post--meta{
margin: 0 25px;
display: inline-block;
text-docoration: none;
}
.posts__post__timestamp{
float:left;
}
.posts__post__tag{
float:right;
}
}
This is because of margin that you have given to posts__post--meta, instead of using margin use padding, and box-sizing:border-box
.posts__post--meta{
padding: 0 25px;
display: inline-block;
text-docoration: none;
width: 100%;
box-sizing: border-box;
}
For more info about box-sizing
.posts__post--meta{
color: $light-grey;
position: absolute;
bottom: 25px;
left: 0;
right:0; //add this
display: block;
}
Just to add a note I have noticed while I'm working on a php application. Using float within a <div> is overridding the whole div. to clarify my point. if you have <div class="page-wrapper"> and within it you have <div id="img-align"> and it has a float, it override the "page-wrapper" and stand alone. don't use it unless you really need it. Thanks
just a simple question i am stuck with. i am playing around with some html and css, i would like to create a page with content box in the centre of the page and two images of arrows on either side of the content box. now thats not hard at all, the issue is i am using position: absolute; so if i change the window size the elements go nuts..
my html:
<div id= "left_side">
<img id="leftArrow" src="images/lefta.png"/>
</div>
<div id="right_side">
<img id="rightArrow" src="images/righta.png"/>
</div>
<div id="content">
<p>something</p>
<p>more something</p>
</div>
and my css looks like this:
#left_side {
border: black solid 1px;
position: absolute;
left: 0;
width: 10em;
text-align: center;
margin: 65px;
border-radius: 8px 8px 8px 8px;
}
#right_side {
border: black solid 1px;
position: absolute;
right: 0;
width: 10em;
text-align: center;
margin: 65px 210px 0px 0px ;
border-radius: 8px 8px 8px 8px;
}
#content {
background-color: white;
width: 500px;
margin: 15px 320px 15px 320px;
padding: 30px;
border:5px;
border-radius: 8px 8px 8px 8px;
}
what can i change so that the side images/buttons are relative to the content box at all times no matter what the screen size. i was thinking of nesting them in a bigger box but is that the best practice or am i going off on the wrong foot all together. sorry for the simple question, i am new to this and positioning always kills me.
thanks in advance
I normally use two wrapper divs to center anything inside them (no absolute style). CSS:
.couter
{
position: relative;
left: 50%;
float: left;
}
.cinner
{
position: relative;
left: -50%;
}
And use like:
<div class="couter">
<div class="cinner">
<div id= "left_side">
<img id="leftArrow" src="images/lefta.png"/>
</div>
<div id="right_side">
<img id="rightArrow" src="images/righta.png"/>
</div>
<div id="content">
<p>something</p>
<p>more something</p>
</div>
</div>
</div>
If you want the content to expand when the page expands, this is how you could do that:
http://jsfiddle.net/VKBTy/
Also, I would use a container box with position:relative.
I have created a jsfiddle for you with a possible solution.
http://jsfiddle.net/simonweston/MuTEn/
HTML:
<div id= "left_side">
LEFT
</div>
<div id="content">
<p>something</p>
<p>more something</p>
</div>
<div id="right_side">
RIGHT
</div>
CSS:
#left_side {
border: black solid 1px;
float: left;
width: 10em;
text-align: center;
border-radius: 8px 8px 8px 8px;
}
#right_side {
border: black solid 1px;
float: left;
width: 10em;
text-align: center;
border-radius: 8px 8px 8px 8px;
}
#content {
background-color: red;
float: left;
width: 100px;
border:5px;
border-radius: 8px 8px 8px 8px;
}
The layout which you need can be brought in a very simpler way..
I have modified your css as
#left_side {float:left;width:100px;padding:10px;}
#right_side {float:left;width:100px;padding:10px;}
#content {width:500px;float:left;background:blue;}
.clear{clear:both;}
and your HTML as
<div id= "left_side">
<img id="leftArrow" src="images/lefta.png"/>
</div>
<div id="content">
<p>something</p>
<p>more something</p>
</div>
<div id="right_side">
<img id="rightArrow" src="images/righta.png"/>
</div>
<div class="clear"></div>
Please use this code to check whether you got your requirement right..