Tips for effectively showcasing the date and time within a chat message interface

I am currently working on a chat application and have successfully implemented displaying the user's name along with the message in the chat box. However, I am facing issues with the design of the date and time display within the UI.

.userTextDivOp {
  text-align: left;
  float: left;
  clear: both;
  position: relative;
  background: white;
  padding-top: 5px;
  padding-bottom: 7px;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 6px;
  border: 3px solid #999;
  font-size: 12px;
  margin-bottom: 7px;
  margin-right: 4px;
  margin-left: 4px;
}

.userTextDivOp::before {
  content: '';
  position: absolute;
  visibility: visible;
  top: -3px;
  left: -11px;
  border: 9px solid transparent;
  border-top: 11px solid #999;
}

.userTextDivOp::after {
  content: '';
  position: absolute;
  visibility: visible;
  top: 0px;
  left: -6px;
  border: 9px solid transparent;
  border-top: 8px solid white;
  clear: both;
}

.userTextDivOp .message {
  word-break: break-all;
  font-size: 13px;
}

.userTextDivOp .username {
  position: relative;
  display: block;
  font-weight: bold;
  font-size: 14px;
  color: #8e0035;
  text-align: left;
  padding-bottom: 4px;
  margin-top: 3px;
}

.userTextDivOp .time {
  position: absolute;
  font-size: 14px;
  color: #f60;
  text-align: right;
}
<div class="userTextDivOp">
  <span class="username">UserName</span>
  <span class="message">' Testing testing</span>
  <span class="time">04:00 PM 7 Jul 2016</span>
</div>
css

Answer №1

.userTextDivOp {
text-align: left;
float: left;
clear: both;
position: relative;
background: white;
padding-top: 5px;
padding-bottom: 40px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-bottom: 7px;
margin-right: 4px;
margin-left: 4px;
}

.userTextDivOp::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
left: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}

.userTextDivOp::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
left: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}

.userTextDivOp .message {
word-break: break-all;
font-size: 13px;
}

.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 14px;
color: #8e0035;
  text-align:left;
  padding-bottom: 4px;
    margin-top: 3px;
}

.userTextDivOp .time {
position: absolute;
  font-size: 14px;
   color: #f60;
}
<div class="userTextDivOp" >
  <span class="username">FirstName</span>
  <span class="message">' Trying out new code</span>
  <span class="time">05:00 PM 16 Mar 2022</span>
</div>

Answer №2

To specify the duration you want to modify, utilize the time class.

.userTextDivOp {
text-align: left;
float: left;
clear: both;
position: relative;
background: white;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-bottom: 7px;
margin-right: 4px;
margin-left: 4px;
}

.userTextDivOp::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
left: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}

.userTextDivOp::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
left: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}

.userTextDivOp .message {
word-break: break-all;
font-size: 13px;
}

.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 14px;
color: #8e0035;
  text-align:left;
  padding-bottom: 4px;
    margin-top: 3px;
}

.userTextDivOp .time {
  //#You can edit these style settings to edit how the Time and date look
position: relative;
   font-size: 14px;
   color: pink;
   padding: 0 20px;
   font-family: courier, monospace;
}
<div class="userTextDivOp" >
  <span class="username">UserName</span>
  <span class="message">' Testing testing</span>
  <span class="time">04:00 PM 7 Jul 2016</span>
</div>

Answer №3

One interesting idea to consider is implementing a feature similar to Facebook - displaying the time when someone hovers over a chat message.

Check out this JS Fiddle example.

Here is the HTML code snippet:

<div class="wrapper">
  <div class="userTextDivOp" >
    <span class="username">UserName</span>
    <span class="message">' Testing testing</span>
    <span class="time">04:00 PM 7 Jul 2016</span>
  </div>
</div>

.wrapper{
  position: relative;
}

.userTextDivOp {
    text-align: left;
    float: left;
    clear: both;
    background: white;
    padding-top: 5px;
    padding-bottom: 7px;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 6px;
    border: 3px solid #999;
    font-size: 12px;
    margin-top: -3px;
    margin-left: -2px;
    cursor:pointer;
}
.userTextDivOp .time {
    position: absolute;
  font-size: 14px;
  color: #f60;
  left: 125px;
  top: 0;
  visibility:hidden;
}
.userTextDivOp:hover .time {
  visibility:visible;
}

.userTextDivOp::before {
    content: '';
    position: absolute;
    visibility: visible;
    top: -3px;
    left: -11px;
    border: 9px solid transparent;
    border-top: 11px solid #999;
}

.userTextDivOp::after {
    content: '';
    position: absolute;
    visibility: visible;
    top: 0px;
    left: -6px;
    border: 9px solid transparent;
    border-top: 8px solid white;
    clear: both;
}

.userTextDivOp .message {
    word-break: break-all;
    font-size: 13px;
}

.userTextDivOp .username {
    position: relative;
    display: block;
    font-weight: bold;
    font-size: 14px;
    color: #8e0035;
    text-align:left;
    padding-bottom: 4px;
    margin-top: 3px;
}

Answer №4

Instead of utilizing the traditional method, why not give the time element a try with the datetime attribute? Time isn't just an ordinary HTML tag. Let's take a look at this straightforward example detailing November 2011:

<time> 2011-11 </time>

The key feature that sets the time element apart is its datetime attribute. This attribute specifies the date, time, or duration in a format readable by machines rather than humans. As a result, it follows very specific standards.

Oftentimes, the human-readable version simply provides a text representation of the datetime:

<time datetime="2011-11">November, 2011</time>

<time datetime="2013-04-01">April 1st, 2013</time>

<time datetime="5d 22h 54m 41s">5 days, 22 hours, 54 minutes, and 41 seconds</time>

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

What could be causing the issue with hammer.js swiping functionality on iPhones?

Looking for assistance from those experienced with hammer.js, as I'm facing an issue with swiping/scrolling on iPhones. I have been developing a web app using 8thwall and hammer.js for swipe and scroll functionality. While testing on my Samsung Galax ...

javascriptioscsshammer.js

Tips for stopping a flex:1 div from expanding to accommodate its abundant content

I'm facing a situation where I need to create two columns, one fixed at 150px and the other filling up the remaining space with scroll functionality for overflow content. Despite trying to use flexbox for this layout, the second column keeps expanding ...

htmlcssflexbox

Energetic flair for Vue animations

I am currently developing a VueJS sidebar component. The objective is to allow the parent to define a width and display a toggle button that smoothly slides the sidebar in and out. Here is an example: <template> <div class="sidebarContainer ...

javascriptcssvue.js

Mastering Instagram Automation: Techniques for Navigating the Lightbox with Selenium

I am in the process of developing a Python script that assists users in Instagram engagement groups by efficiently liking everyone's photo during each round. I am facing an issue where Selenium is unable to click on the first photo when I reach a user ...

pythoncssselenium-webdriverinstagram

Is Safari causing issues with the CSS slider animation?

Currently, I am working on implementing a CSS-only slider (no jQuery) in WordPress using the code from this source: http://codepen.io/dudleystorey/pen/kFoGw An issue I have encountered is that the slider transitions are not functioning correctly in Safari ...

htmlcsswordpress

100% Footer Visibility on iPad

Seeking assistance as I am facing an issue with my Joomla website. The footer width is not extending to 100% on an iPad, it seems stuck at the footer content limit. Can anyone help me by providing the correct CSS code? The website in question is: www.webk ...

cssipadfooter

Seeking Up/Down Arrows HTML numerical input feature specifically designed for iOS devices

I am having an issue with a number input box on iOS. I am utilizing jquery, kendo mobile, and HTML5 for this particular task. While the number input displays up and down arrows in the Icenium simulator, they are not showing on the iPad. I am seeking a sol ...

ioscsshtmlinputkendo-mobile

Showing tags with varying sizes

https://i.sstatic.net/oo3MP.png Is there a better way to organize and display my content? I have an array of elements that I want to display like the example above. I attempted using lists, but it didn't work out as expected. Here's what I&apo ...

htmlcsstwitter-bootstrap-3

Creating Horizontal Repeating Cards in Three Columns with Bootstrap 4: Cards

I want to create a layout like the one shown below: card1 card2 card3 card4 card5 card6 card7 card8 card9 card10 card11 card12 card13 card14 card15 etc....(using asp.net repeater control) INSTRUCTION: I need the cards to be displayed horizontally in thre ...

csstwitter-bootstrapbootstrap-4

Adjust the height of the list when including or excluding floated list items that are not in the final row

Within my ul are li elements with varying widths that wrap around inside a container into multiple rows. When removing an li element from the ul, I want the container's height to adjust dynamically in case a row is eliminated. If the removal happens ...

javascriptjqueryhtmlcss

The text is not meticulously arranged within the designated span

My text-align (center) property doesn't seem to be working correctly with the following code snippet: <span class="info">&nbsp;i&nbsp;<span id="uitleg_itje">Bla bla. </span></span> The CSS for the info class is as fo ...

htmlcss

Creating a responsive container in Bootstrap that adjusts height dynamically, featuring a text input box positioned at the bottom

I am currently using Bootstrap 4 to design a desktop chatbot inspired by Google's Bard. My goal is to have a container that spans the height of the screen, with the text input located at the bottom of the container. Additionally, I want the container ...

htmlcssbootstrap-4

Troubleshoot: OffCanvas feature in Bootstrap 5 not functioning properly within navbar on small screens

I'm having trouble implementing Bootstrap 5 OffCanvas within the Navbar on laptop/desktop screens. It seems to only work properly on mobile screens with a size of sm or lower, displaying the hamburger menu. Any suggestions on how to make it functional ...

htmlcsstwitter-bootstrapbootstrap-5

Button with embedded Bootstrap dropdown

I need help with centering a dropdown menu on my webpage. I followed the instructions, but it's still appearing next to the button instead of in the center. Below is the code snippet: <div class="btn-group"> <button type=" ...

htmlcssbootstrap-5

"Using jQuery to append a new div after the last div that matches a specified class on

I am looking to dynamically add a new div element at the end of the last match on click. <form id="form"> <div class="border item-block"> <p><b>Color :</b> silver </p> <input type= ...

jqueryhtmlcss

Conceal the scrollbar when the expansion panel is in its collapsed state

One issue I am encountering is that the scroll-bar appears when the expansion panel is collapsed, but not when it's expanded. Here are the references: Collapsed Expanded <mat-expansion-panel class="panel"> <mat-expansion-panel-he ...

htmlcss

Is there a way to remove the spacing that browsers automatically add to <input> elements?

Take a look at this example: http://jsfiddle.net/JPQxX/ I tested this in both Chrome and Firefox. In both browsers, there seems to be a small 1-2px margin between the two input elements. I am looking for a solution to make these two elements touch without ...

htmlcss

Is there a way for me to manually designate certain domains with the rel="follow" attribute while assigning all other external links with the rel="nofollow" attribute?

I'm working on developing a community platform similar to a social network. I've implemented a code that automatically makes all external links nofollow. However, I would like to create a feature that allows me to remove the nofollow attribute f ...

javascriptphphtmlcsssocial-networking

Adding CSS code to my index.css file in React is not reflected in my application

I've been following a tutorial on YouTube about reactJS, and the YouTuber recommended importing a CSS file into index.css to properly style the website. However, when I tried copying the CSS code and importing it into both App.js and Index.js, nothing ...

cssreactjs

Error in JavaFX: CSS Parser anticipating COLON

Encountered an error and struggling to find the issue as everything seems right from my perspective: CSS Code: @font-face { font-family: 'Titillium'; font-style: normal; font-weight: normal; src: url('Titillium.ttf'); ...

javacssjavafx