Snug enclosure surrounding an image

I'm currently working on creating a chat application and I need the chat bubbles to snugly wrap around their contents. It's working fine for text, but when an image is included in the bubble, it creates some issues. Below is the HTML code 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 the image is loaded, there is a lot of extra padding next to the image, causing the div not to tightly wrap around it. This is how it looks:

https://i.sstatic.net/RXbLT.jpg

UPDATE: I have shared a JS Fiddle with the code and CSS. https://jsfiddle.net/dw9aek2y/

Is there a way to make the chat bubble div fit tightly around the picture? Thank you!

htmlcsscss-positionpositioning

Answer №1

To resolve the issue, simply eliminate the width property and introduce a max-width attribute.

#messageBubbleArea {
    font: 14px Arial;
    margin-top: 20px;
    padding: 0 10px;
    max-width: 80%;
}

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attach functions to elements added dynamically

I've been struggling with trying to attach functions to newly added elements using jQuery. Despite experimenting with various online examples, I haven't been able to get anything to work properly. My setup involves a form with an ID and a button. ...

jqueryhtmlajax

When the Ionic 5 iOS dark theme is activated, the header casts a subtle shadow when the menu bar is opened or

I have been attempting to determine why there is shadow styling in the header when the menubar is closed in Ionic iOS. After inspecting the elements, I am unable to pinpoint exactly where this style is being applied. It seems to be related to the .toolba ...

cssangularionic-frameworkionic5

Numerals for Central Leaflet Marker

Is there a way to effectively center numbers inside markers? Here is the current situation: View Marker with Number How to Create a Marker return L.divIcon({ className: "green-icon", iconSize: [25, 41], iconAnchor: [10, 44], popupAn ...

javascriptcssreactjsleafletreact-leaflet

"Utilizing the flex box feature in IE 10 for efficient text trunc

.container { background: tomato; width: 100px; display: flex; } .text-left { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-right { } <div class=container> <div class="text-left"> title title title ...

htmlcssflexboxinternet-explorer-10

Do not show empty pages in Mpdf display

I utilized Mpdf to generate a three-page PDF document. The first and third pages consistently contain data, but the presence of data on the second page varies. I prefer not to display the second page if it is empty. Here's the code structure: html = ...

phphtmlmpdf

Challenges arise with the height settings of ui-grid

Currently, I am facing an issue with using height: auto on an angularJS ui-grid. The problem arises from an inline style that specifies a fixed height on the div to which the ui-grid attribute is added. Additionally, the function getViewPortStyle() dynamic ...

javascriptcssangularjsangular-ui-grid

Here's a quick tip for adding a new line in your input message in Angular - just press Shift +

I need help with my chat box input field. I want it to be able to handle new line inputs similar to Facebook's chatbox. Here is a screenshot of My Chat Box: [1]: https://i.sstatic.net/NeG7d.png My HTML code for the input field: <form class=" ...

htmlangularinputtextchat

Is it possible to combine the output of a loop using Liquid?

My goal is to display something like: data-tags="[tag1, tag2, tag3]" but I'm currently seeing data-tags:[tag1tag2tag3]. Is my usage of join incorrect? Here is the code: data-tags="{% for tag in subtask.tags %}{{tag.title | slugify | join ', &ap ...

htmljekyllliquid

Having trouble centering an element with Bootstrap's offset feature in CSS

Here is the HTML code I am working with: <div id = "search_form" > <h1> Looking for travel ideas? </h1> <div class="input-group"> <form action="" method="get" id = "search-form" > {% csrf_token %} ...

htmlcsstwitter-bootstrap

transferring the form data to another page using AngularJS

My form consists of inputs, and in AngularJS, I am looking to pass a parameter in the URL. However, I have managed to pass the parameter in the URL but not in the desired way. Below is my code snippet: <form action="#/report" method="get"> <sel ...

htmlangularjsangular-forms

Unable to transmit information to a different page

My goal is to transmit both hidden data and user input data to another page. Initially, I attempted to have just one user input field, which allowed the system to transmit the data successfully. <h1><strong>Please scan barcode on JIG</stron ...

phphtmlmysql

Ways to conceal and reveal content within div elements

I have a code snippet that is currently operational, but I am looking to enhance it by displaying one div at a time. If you would like to view the code, please visit my CodePen link below: https://codepen.io/danongu/pen/YzXvpoJ Due to the extensive amou ...

jqueryhtmlcss

Persist the checkbox value in the database and update the status of the label accordingly

I need a checkbox for user preference selection that is stored in a MySQL database for constant availability. The label should change to "Enabled" when the checkbox is selected and vice versa. Upon saving (submitting) the page, an alert message should disp ...

javascriptphpjqueryhtml

Scroll bar design that seamlessly integrates with text wrapping when hovered over

In many of the pages on my blog, I have a structure that consists of boxes with a link like this: http://jsfiddle.net/gliu/E32Bh/ The issue I'm facing is that when too much text is added to these boxes, a vertical scrollbar appears only upon hoverin ...

htmlcsstextscrollbar

a container holding two floating divs

I have been attempting to create two divs positioned side by side, with one containing content and the other acting as a sidebar. Both of these divs are contained within another larger container div. Despite my efforts, I have not been successful in achiev ...

htmlcsscontainers

Show MaterialUI Dialog in fullscreen mode

I'm just starting out with React and Material-UI, and I'm trying to figure out how to print my current dialog. The issue I'm running into is that I can't seem to find a way to set the Dialog to full screen for printing while keeping it ...

cssreactjsmaterial-uireact-tsx

Dragging additional events into FullCalendar is disabled after applying a filter to external events

I am encountering an issue while attempting to drag events from the external events box to the fullcalendar. To replicate the problem, you can visit this CodePen: Initially, dragging an external event into the calendar works smoothly. However, after appl ...

jqueryangularjshtmlfullcalendar

What is the best way to incorporate Font Awesome icons into a UTF-16 encoded HTML document?

Trying to incorporate Font Awesome icons in UTF-16 encoded HTML pages can be a bit tricky. Following these steps should help you achieve the desired results: <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://use.fontawe ...

cssunicodeutf-8font-awesomeutf-16

Is it possible to display all tabs simultaneously with jQuery for tabbed content?

I'm currently utilizing jQuery to organize my content into various tabs, and it's working perfectly for displaying a specific <div> when a tab is clicked. However, I'm now looking to add a button that can toggle the display of all tab ...

javascriptjqueryhtml

What is the process for loading this image?

While browsing through this stunning website, I came across a feature that caught my eye. Can someone please explain how the designer displayed the "The magic is loading" effect: The image vanishes once the site has finished loading completely. ...

javascripthtml