The alignment of the HTML and CSS speech bubble is experiencing issues

I need help with CSS as I am new to it and trying to create a speech bubble. However, when the text inside the bubble is long, it overlaps the timestamp. I am currently using `display: inline-block;` in my CSS. Below are snippets of my HTML and CSS code:

.speech-wrapper{
      padding: 2px 6px;
  }
  .chatbox {
      display: inline-block;
      float:right;
      /* other styles */
  }
  /* more styles */



    <div class="speech-wrapper"><div class="chatbox triangle right-top"><div class="txt"><p class="name">Apple TestUser1</p><span>Hi</span><p class="timestamp">10:20 pm</p></div><div class="bubble-arrow"></div></div>
    <div class="speech-wrapper"><div class="chatbox_other triangle left-top"><div class="txt"><p class="name">Apple TestUser1</p><span>Hi hegi</span><p class="timestamp">10:20 pm</p></div><span class="bubble-arrow"></span></div>

If you have any insights on how to fix this issue, please share!

htmlcss

Answer №1

Attempting to implement the following changes...

Modifications include:

  1. padding-bottom: 25px; added in .chatbox_other & .chatbox
  2. margin-bottom: 5px; added in .timestamp

.speech-wrapper {
  padding: 2px 6px;
}

.chatbox {
  display: inline-block;
  float: right;
  padding: 10px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 0px;
  margin-bottom: 10px;
  background: #075698;
  color: #FFF;
  position: relative;
  border-radius: 10px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  box-shadow: 0 8px 6px -6px black;
  width: inline;
  padding-bottom: 25px;
}

.chatbox_other {
  display: inline-block;
  float: left;
  height: auto;
  padding: 10px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 0px;
  background: #DCDCDC;
  color: #000;
  position: relative;
  border-radius: 10px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  box-shadow: 0 8px 6px -6px black;
  padding-bottom: 25px;
}

.name_other {
  font-weight: 600;
  font-size: 12px;
  margin: 0px 0px 9px;
  color: #1970b0;
}

.name_other1 {
  font-weight: 600;
  font-size: 12px;
  margin: 0px 0px 9px;
  color: #ba006e;
}

.name_other2 {
  font-weight: 600;
  font-size: 12px;
  margin: 0px 0px 9px;
  color: #007670;
}

.name_other3 {
  font-weight: 600;
  font-size: 12px;
  margin: 0px 0px 9px;
  color: #3b0256;
}

.name_other4 {
  font-weight: 600;
  font-size: 12px;
  margin: 0px 0px 9px;
  color: #00512b;
}

.name_other5 {
  font-weight: 600;
  font-size: 12px;
  margin: 0px 0px 9px;
  color: #a91024;
}

.name_other6 {
  font-weight: 600;
  font-size: 12px;
  margin: 0px 0px 9px;
  color: #b8471b;
}

.name_other7 {
  font-weight: 600;
  font-size: 12px;
  margin: 0px 0px 9px;
  color: #7f1c7d;
}

.timestamp_other {
  font-size: 11px;
  position: absolute;
  bottom: 0px;
  right: 10px;
  text-transform: uppercase;
  color: #999;
}

.timestamp {
  font-size: 11px;
  position: absolute;
  bottom: 0px;
  right: 10px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 5px;
}


/* speech bubble 13 */

.name {
  font-weight: 600;
  font-size: 12px;
  margin: 0px 0px 9px;
  color: #ffffff;
}

.triangle.left-top:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: -10px;
  right: auto;
  top: 0px;
  bottom: auto;
  border: 22px solid;
  border-color: #DCDCDC transparent transparent transparent;
  z-index: -1;
}

.triangle.right-top:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -10px;
  top: 0;
  bottom: auto;
  border: 32px solid;
  border-color: #075698 transparent transparent transparent;
  z-index: -1;
}

.alt {
  margin: 0 0 0 60px;
}
<div class="speech-wrapper">
  <div class="chatbox triangle right-top">
    <div class="txt">
      <p class="name">Apple TestUser1</p><span>Hi</span>
      <p class="timestamp">10:20 pm</p>
    </div>
    <div class="bubble-arrow">
    </div>
  </div>
  <div class="speech-wrapper">
    <div class="chatbox_other triangle left-top">
      <div class="txt">
        <p class="name">Apple TestUser1</p><span>Hi Your_Name</span>
        <p class="timestamp">10:20 pm</p>
      </div><span class="bubble-arrow">
</span></div>

Answer №2

Updating the style of the timestamp class should resolve the issue.

I made a modification to the timestamp by floating it to the right and converting it into a block element to ensure its independence.

  display: block;
  float: right;
  padding-top: 10px;

The corrected code snippet is shown below - 

.speech-wrapper {
  padding: 2px 6px;
}

.chatbox {
  float: right;
  padding: 10px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 0px;
  margin-bottom: 10px;
  background: #075698;
  color: #FFF;
  position: relative;
  border-radius: 10px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  box-shadow: 0 8px 6px -6px black;
  width: inline;
}

.chatbox_other {
  float: left;
  height: auto;
  padding: 10px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 0px;
  background: #DCDCDC;
  color: #000;
  position: relative;
  border-radius: 10px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  box-shadow: 0 8px 6px -6px black;
}

.timestamp {
  font-size: 11px;
  display: block;
  float: right;
  padding-top: 10px;
  text-transform: uppercase;
  color: #fff
}


/* speech bubble 13 */

.name {
  font-weight: 600;
  font-size: 12px;
  color: #ffffff;
}

.triangle.left-top:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: -10px;
  right: auto;
  top: 0px;
  bottom: auto;
  border: 22px solid;
  border-color: #DCDCDC transparent transparent transparent;
  z-index: -1;
}

.triangle.right-top:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -10px;
  top: 0;
  bottom: auto;
  border: 32px solid;
  border-color: #075698 transparent transparent transparent;
  z-index: -1;
}
<div class="speech-wrapper">
  <div class="chatbox triangle right-top">
    <div class="txt">
      <p class="name">Apple TestUser1</p><span>Hi sdsdsd dssssssssssssssssssssssssss</span>
      <p class="timestamp">10:20 pm</p>
    </div>
    <div class="bubble-arrow">
    </div>
  </div>
  <div class="speech-wrapper">
    <div class="chatbox_other triangle left-top">
      <div class="txt">
        <p class="name">Apple TestUser1</p><span>Hi hegi</span>
        <p class="timestamp">10:20 pm</p>
      </div><span class="bubble-arrow">
</span></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

Is the JavaScript progress bar dysfunctional when used with object-oriented JavaScript code, but functions properly with arrow functions?

After posting a question about the JavaScript progress bar not working with object-oriented JavaScript code on Stack Overflow, I decided to try rewriting the script using arrow functions. Here is the new code: document.getElementById("barButton").addEve ...

javascripthtmlcssoop

Achieve consistent heights for divs within table cells without the use of JavaScript

Is it possible to make two divs contained in table cells in a shared row both have the height of the taller div without using JavaScript? Take a look at this simplified example here: http://jsfiddle.net/Lem53dn7/1/ Check out the code snippet from the fidd ...

htmlcssdynamichtml-table

Generate a Vue component that automatically wraps text dynamically

Challenge I am looking for a way to dynamically wrap selected plain text in a Vue component using the mouseUp event. For instance: <div> Hello World! </div> => <div> <Greeting/> World! </div> Potential Solution Approach ...

javascripthtmlvue.jsfrontend

Screen JSON data by applying filters

In my current project, I am working on extracting data from a JSON file and presenting it to the user in a way that allows them to input values that match the expected data. My goal is to show different sections of the screen at different times. The initi ...

javascripthtmljsonknockout.js

Displaying images with Javascript when they are clicked

How can I make a speech bubble appear when the image of the person is clicked? <div> <p style="float: left;"><img src="person.png" border="1px"></p> </div> <script> function bubblespeech() { document.getEl ...

javascripthtmlimagebuttonclick

Integrate JavaScript code with HTML pages

After creating a basic HTML structure that I am proud of, I encountered some challenges with getting the Javascript to function properly. I am new to working with Javascript and received some initial assistance, but unfortunately, it is no longer working. ...

javascriptjqueryhtmljsonajax

Evolution of the material through a fresh new slide

Can someone assist me with an animation issue? I have a slideshow consisting of 4 images that are supposed to transition automatically after a set time interval. Upon initially loading the webpage, the animation works perfectly as intended. However, subs ...

javascripthtmlcss

Presentation: Troubleshooting Ineffective CSS3 Transitions

I have created a basic slideshow that can accommodate multiple images. Clicking on an image should move to the next slide, and once the last image is clicked, it should loop back to the first slide. The functionality of transitioning between slides seems ...

javascripthtmlcss

Troubleshooting Bootstrap 4 Content Alignment Issue: Centering Horizontally and Vertically

Having trouble centering my content both vertically and horizontally within the body of the webpage using Bootstrap 4. Despite trying various solutions from the documentation and StackOverflow, I can't seem to get it to work. Would greatly appreciate ...

htmlcssbootstrap-4

Why is it that consolidating all my jQuery plugins into one file is ineffective?

Prior to this, I included the following scripts: <script type="text/javascript" src="{{MEDIA_URL}}js/plugins/json2.js"></script> <script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery-msdropdown/js/jquery.dd.js"></script&g ...

javascriptjquerycssdjangotemplates

How to position a static element using CSS

I'm trying to align an image in the center of the screen, but I've run into some trouble. Typically, this is easy by setting the width of a div and using margin: auto;. However, I also need the div to have the position: fixed; property, which see ...

htmlcsspositionfixed

I'm having trouble getting Pycharm to locate my static files

My Pycharm is having trouble locating my CSS files. I've attached a screenshot showing the settings.py file, the directory where the .css file is located, and the error message from the terminal indicating a 404 error. Could someone please help me ide ...

pythoncsspycharm

Retrieve data from TypeScript file (.ts) and use it in an HTML document

Recently I started learning Typescript and HTML as I work on building an Angular2 application. At the moment, I have a TypeScript file that resembles the following structure: import {Http, Headers} from 'angular2/http'; import {Component} from & ...

javascripthtmltypescriptangular

Incorporate a vibrant red circle within a tab of the navigation bar

I'm looking to incorporate a red dot with a number into a messaging tab to indicate new messages. Below is the HTML code: <ul class="nav pw-nav pw-nav--horizontal"> <li class="nav-item"> <a class="nav ...

javascripthtmlangulartypescriptangular6

Building a Dynamic CSS Grid

Today is the first time I'm reaching out for help rather than figuring things out on my own. I'm currently working on a website layout that consists of visible tiles all with equal sizes, forming a grid structure. The challenge I face is making t ...

javascripthtmlcss

What is the best way to design a bookmarklet that can overlay an HTML/div layer and apply CSS styles from an

Is there a way to incorporate a bookmarklet that can bring in a new layer/div with additional HTML and CSS from an external file, overlaying it on the current page? If anyone has an example of a bookmarklet that achieves this, would you be willing to shar ...

javascriptjquerycsshtmlbookmarklet

Displaying or concealing fields through Javascript depending on the category type of the results item

I am facing an issue with displaying certain fields in each individual property search result based on the property type. For example, if a property is classified as Land, I do not want the bedrooms and bathrooms fields to be visible, but if it is a Villa, ...

javascriptjqueryhtmlcss

What is the best way to use jQuery to display the character represented by an ASCII code &###?

Struggling with printing text? I am trying to append some content to an array, but it's showing special characters like &aacute; instead of the actual accented letters. Any suggestions on how to fix this issue? This is for a select tag, so I&apos ...

jqueryhtml

Arranging divs parallelly while incorporating components within

Striving to create a layout with 3 divs side by side in an HTML document, my initial attempt resulted in this: https://i.stack.imgur.com/CpdLX.png However, I encountered an issue where the div would shift down whenever text or other objects were added: ...

htmlcss

Is it possible for a website administrator to view the modifications I have made to the CSS and HTML code?

Is it possible for a website to detect any temporary changes made to their CSS or Html through developer tools, even though these changes are not permanent? ...

htmlcss