I'm trying to create a page wich will be used to send/receive SMS, I want to show when each SMS was sent/received but I can't seem to be able to align the date right...
Here is my jsfiddle: https://jsfiddle.net/xazvruqj/2/
EDIT: My jsfiddle was missing the actual CSS ...
This part in my CSS is causing me trouble :
.dateR{
position: absolute;
width: 400px;
float: left;
top: 100%;
text-align: right;
font-size: 75%;
font-style: italic;
}
.dateL{
position: absolute;
width: 200px;
left: 2px;
top: 100%;
text-align: left;
font-size: 75%;
font-style: italic;
}
As you can see the dates on the right are completly wrong, I would like them to be text-aligned to the right and under the message.
I thougth that using position:absolute for the date would make it easier but it was only true for the left side.
Thanks for reading this.
There are probably other solutions out there - but it's easy enough if you just place the dates in their own containers and align them separately.
Here's a solution using a new CSS class "bubble-line":
/* Bit of normalisation */
body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 400px;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.container {
padding: 10px 10px;
margin: 0 auto;
width: 400px;
}
/* .bubble */
.bubble-line {
width: 100%;
position: relative;
}
.bubble-line-right {
width: 100%;
float: right;
}
.bubble {
background-image: linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.25, rgb(210, 244, 254)), color-stop(1, rgb(149, 194, 253)));
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
margin-bottom: 5px;
padding: 8px 30px;
position: relative;
display: inline-block;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before,
.bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
left: -5px;
}
.bubble--alt {
background-image: linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.25, rgb(172, 228, 75)), color-stop(1, rgb(122, 205, 71)));
float: right;
display: inline-block;
}
.bubble--alt:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
left: auto;
right: -7px;
}
.bubble--alt:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
left: auto;
right: -5px;
}
.dateR {
display: inline-block;
float: right;
text-align: right;
font-size: 75%;
font-style: italic;
}
.dateL {
text-align: left;
font-size: 75%;
font-style: italic;
}
<body>
<div class="container">
<div class="bubble-line">
<div class="bubble ">Test</div>
</div>
<div class="bubble-line">
<div class="dateL">11 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble bubble--alt">Test</div>
</div>
<div class="bubble-line-right">
<div class="dateR">12 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble bubble--alt">TestTestTestTestTest TestTest Test Test TestTestTestTestTestTestTest</div>
</div>
<div class="bubble-line-right">
<div class="dateR">12 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble ">TestTestTestTestTest TestTest Test Test TestTestTestTestTestTestTest</div>
</div>
<div class="bubble-line">
<div class="dateL">12 mai 2015 12:02:02</div>
</div>
</div>
</body>
<body>
<div class="container">
<div class="bubble-line">
<div class="bubble ">Test</div>
</div>
<div class="bubble-line">
<div class="dateL">11 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble bubble--alt">Test</div>
</div>
<div class="bubble-line-right">
<div class="dateR">12 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble bubble--alt">TestTestTestTestTest TestTest Test Test TestTestTestTestTestTestTest</div>
</div>
<div class="bubble-line-right">
<div class="dateR">12 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble ">TestTestTestTestTest TestTest Test Test TestTestTestTestTestTestTest</div>
</div>
<div class="bubble-line">
<div class="dateL">12 mai 2015 12:02:02</div>
</div>
</div>
</body>
That way, you don't run into issues with floats stacking up on the same line, and don't break the background image positions on the text bubbles.
Hi not sure if this will help.
Use on your .dateR
position:absolute;
left: 0; (Or wherever you want it)
No need for float:left with absolute positioning
Also, make sure the parent element is set to position:relative;
Related
I'm modifying some CSS/HTML that I found here that displays a iOS style chat message with bubbles. I wanted to swap the alignment of the blue and green bubbles which I've managed to do but the only thing I'm not sure about is how to change the little "handle" that appears in the bottom left and right corners around as well.
Here's how it currently looks:
/* Bit of normalisation */
body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.container {
padding: 40px 20px;
margin: 0 auto;
width: 400px;
}
/* .bubble */
.bubble {
background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(210,244,254)),
color-stop(1, rgb(149,194,253))
);
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
float: right;
margin-bottom: 20px;
padding: 8px 30px;
position: relative;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before, .bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
left: -5px;
}
.bubble--alt {
background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(172,228,75)),
color-stop(1, rgb(122,205,71))
);
float: left;
}
.bubble--alt:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
left: auto;
right: -7px;
}
.bubble--alt:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
left: auto;
right: -5px;
}
<div class="container">
<div class="bubble">
Blue text bubble
</div>
<div class="bubble bubble--alt">
Green text bubble
</div>
<div class="bubble">
A bubble containing lots and lots and lots and lots of content on multiple lines
</div>
<div class="bubble bubble--alt">
Bubble with image
<img src="http://placekitten.com/800/600" alt="" />
</div>
<div class="bubble">
Bubblewitharidiculouslylongwordwhichwrapseffortlesslyontotwolines
</div>
</div>
I can't work out how to swap the little handles in the bottom corners of each bubble so they are on the opposite side. I'd like the blue one appear from the bottom right corner and the green one appearing from the bottom left corner.
Here you go full code:
Under .bubble:before{..} and .bubble:after {..} you have used left property that should be of right and vice-versa for 'bubble--alt:before{..}andbubble--alt:after{..}`.
body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.container {
padding: 40px 20px;
margin: 0 auto;
width: 400px;
}
/* .bubble */
.bubble {
background-image: linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -webkit-gradient( linear, right bottom, right top, color-stop(0.25, rgb(210, 244, 254)), color-stop(1, rgb(149, 194, 253)));
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
float: right;
margin-bottom: 20px;
padding: 8px 30px;
position: relative;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before,
.bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
right: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
right: -5px;
}
.bubble--alt {
background-image: linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.25, rgb(172, 228, 75)), color-stop(1, rgb(122, 205, 71)));
float: left;
}
.bubble--alt:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
right: auto;
left: -7px;
}
.bubble--alt:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
right: auto;
left: -5px;
}
<div class="container">
<div class="bubble">
Blue text bubble
</div>
<div class="bubble bubble--alt">
Green text bubble
</div>
<div class="bubble">
A bubble containing lots and lots and lots and lots of content on multiple lines
</div>
<div class="bubble bubble--alt">
Bubble with image
<img src="http://placekitten.com/800/600" alt="" />
</div>
<div class="bubble">
Bubblewitharidiculouslylongwordwhichwrapseffortlesslyontotwolines
</div>
</div>
Updated your code. Is this what you want?
/* Bit of normalisation */
body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.container {
padding: 40px 20px;
margin: 0 auto;
width: 400px;
}
/* .bubble */
.bubble {
background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(210,244,254)),
color-stop(1, rgb(149,194,253))
);
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
float: right;
margin-bottom: 20px;
padding: 8px 30px;
position: relative;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before, .bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
right: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
right: -5px;
}
.bubble--alt {
background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(172,228,75)),
color-stop(1, rgb(122,205,71))
);
float: left;
}
.bubble--alt:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
right: auto;
left: -7px;
}
.bubble--alt:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
right: auto;
left: -5px;
}
<div class="container">
<div class="bubble">
Blue text bubble
</div>
<div class="bubble bubble--alt">
Green text bubble
</div>
<div class="bubble">
A bubble containing lots and lots and lots and lots of content on multiple lines
</div>
<div class="bubble bubble--alt">
Bubble with image
<img src="http://placekitten.com/800/600" alt="" />
</div>
<div class="bubble">
Bubblewitharidiculouslylongwordwhichwrapseffortlesslyontotwolines
</div>
</div>
I have a class called bgGradient which adds a gradient. When .bgGradient is added, it's pushing my content down a considerable amount, whereas I basically just want it as the background.
.content {
padding: 100px 0px;
border: 1px solid blue;
}
.bgGradient {
border: 1px solid red;
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
position: absolute;
background: rgb(92, 156, 155);
background: -moz-linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
background: -webkit-linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
background: linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5c9c9b", endColorstr="#8ccdcc", GradientType=1);
}
.bgGradient:before {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 100vh 0 0 100vw;
border-color: #fff transparent #fff transparent;
z-index: 2;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="wrapper bgGradient">
<div class="container">
<div class="row justify-content-center">
<div class="col-6 content text-center">
<h2>this is a test heading</h2>
</div>
</div>
</div>
</div>
No need extra element, you can consider multiple background:
.content {
padding: 100px 0px;
border: 1px solid blue;
}
.bgGradient {
border: 1px solid red;
height: 100vh;
left:0;
right:0;
padding: 0;
margin: 0;
position: absolute;
background:
linear-gradient(to bottom left,#fff 49.7%,transparent 50%),
linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<div class="wrapper bgGradient">
<div class="container">
<div class="row justify-content-center">
<div class="col-6 content text-center">
<h2>this is a test heading</h2>
</div>
</div>
</div>
</div>
You can also have transparency using clip-path:
.content {
padding: 100px 0px;
border: 1px solid blue;
}
.bgGradient {
border: 1px solid red;
height: 100vh;
left:0;
right:0;
padding: 0;
margin: 0;
position: absolute;
z-index:0;
}
.bgGradient:before {
content:"";
position: absolute;
z-index:-1;
top:0;left:0;right:0;bottom:0;
background:
linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
clip-path:polygon(0 0,0 100%,100% 100%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<div class="wrapper bgGradient">
<div class="container">
<div class="row justify-content-center">
<div class="col-6 content text-center">
<h2>this is a test heading</h2>
</div>
</div>
</div>
</div>
Or mask-image:
.content {
padding: 100px 0px;
border: 1px solid blue;
}
.bgGradient {
border: 1px solid red;
height: 100vh;
left:0;
right:0;
padding: 0;
margin: 0;
position: absolute;
z-index:0;
}
.bgGradient:before {
content:"";
position: absolute;
z-index:-1;
top:0;left:0;right:0;bottom:0;
background:
linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
-webkit-mask-image:linear-gradient(to bottom left,transparent 49.8%,#fff 50%);
mask-image:linear-gradient(to bottom left,transparent 49.8%,#fff 50%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<div class="wrapper bgGradient">
<div class="container">
<div class="row justify-content-center">
<div class="col-6 content text-center">
<h2>this is a test heading</h2>
</div>
</div>
</div>
</div>
Issue
I currently have a side menu that I have built using Angular and it works pretty well on my screen (4k resolution). Problem being on smaller screens the text in the menu doesn't wrap so it overflows the container div. I have tried applying overflow-wrap: break-word; to the text but that is not working.
Any assistance would be greatly appreciated.
You can see the issue below:
Code
HTML of the component:
<div class="sidebar animated fadeIn">
<div class="header">
<div style="display:block;margin-left:auto;margin-right:auto;width:100%;">
<img src="../../../assets/images/logo.svg" style="width:100%" />
</div>
</div>
<div class="spacer"></div>
<div class="menu-item" *ngFor="let item of items" (click)="goTo(item.path)">
<i class="material-icons">{{item.icon}}</i>
<h3 class="text">{{item.name}}</h3>
</div>
</div>
Styling of the component:
.sidebar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 2;
width: 10%;
background: rgba(191, 158, 69, 1);
background: -moz-linear-gradient(top, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
background: -webkit-gradient(
left top,
left bottom,
color-stop(0%, rgba(191, 158, 69, 1)),
color-stop(100%, rgba(250, 239, 210, 1))
);
background: -webkit-linear-gradient(bottom, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
background: -o-linear-gradient(bottom, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
background: -ms-linear-gradient(bottom, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
background: linear-gradient(to top, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf9e45', endColorstr='#faefd2', GradientType=0 );
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
}
.header {
width: 100%;
}
.spacer {
margin-top: 3em;
}
.menu-item {
border-top: 1px solid darkgray;
padding-left: 2em;
height: 3em;
display: flex;
align-items: center;
cursor: pointer;
}
.menu-item .text {
margin-left: auto;
margin-right: auto;
overflow-wrap: break-word;
}
Add this property word-break: break-all;
.menu-item .text {
margin-left: auto;
margin-right: auto;
/*overflow-wrap: break-word;*/
word-break: break-all;
}
I'm creating an iMessages like view of some data showing outgoing and incoming messages - I found a nice CSS solution here:
http://cssdeck.com/labs/6mifhkdc
One missing part that I need is the ability to show the timestamps when messages were sent/received - like you get in iMessages when you swipe a message to the left. I have the timestamps stored and ready to display, I just need some guidance on the CSS to use to make them appear like they do in iMessages.
(the timestamps will appear permanently on the page - no swiping involved)
I'm a newbie at CSS so not sure where to start to add this type of attribute.
Here's a sample of how my page currently looks:
<!DOCTYPE html>
<html lang="en">
<head>
<title>fmSMS Chat Thread</title>
<style type="text/css">
/* Bit of normalisation */
/* Inspired by: http://cssdeck.com/labs/6mifhkdc */
body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.container {
padding: 40px 20px;
margin: 0 auto;
width: 400px;
}
/* .bubble */
.bubble {
background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(210,244,254)),
color-stop(1, rgb(149,194,253))
);
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
float: left;
margin-bottom: 20px;
padding: 8px 30px;
position: relative;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before, .bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
left: -5px;
}
.bubble--green {
background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(172,228,75)),
color-stop(1, rgb(122,205,71))
);
float: right;
}
.bubble--green:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
left: auto;
right: -7px;
}
.bubble--green:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
left: auto;
right: -5px;
}
</style>
</head>
<body>
<div class="container">
<div class="bubble">
This is a sample outgoing message
</div>
<div class="bubble bubble--green">
Here's the first reply
</div>
<div class="bubble">
Here's the next sent message
</div>
<div class="bubble bubble--green">
And the final reply
</div>
</div>
</body>
</html>
You can not use CSS to add timestamps. Generate the timestamp from javascript or get it from the API and then add it to your DOM.
First add the timestamp to your application using the Javascript attribute Date.now. Then make it look pretty using CSS. CSS will only control the way elements look in your application, it's not the language to use to add elements to your application.
Found this which was close to what I was after:
http://cssdeck.com/labs/pmbrpxle
Here is the CSS i'm using:
body {
font-family: 'Open Sans', sans-serif;
background-color: #DB1F1F;
}
.navbar-menu {
background-image: linear-gradient(bottom, rgb(72,174,52) 41%, rgb(101,209,78) 71%);
background-image: -o-linear-gradient(bottom, rgb(72,174,52) 41%, rgb(101,209,78) 71%);
background-image: -moz-linear-gradient(bottom, rgb(72,174,52) 41%, rgb(101,209,78) 71%);
background-image: -webkit-linear-gradient(bottom, rgb(72,174,52) 41%, rgb(101,209,78) 71%);
background-image: -ms-linear-gradient(bottom, rgb(72,174,52) 41%, rgb(101,209,78) 71%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.41, rgb(72,174,52)),
color-stop(0.71, rgb(101,209,78))
);
background-repeat: repeat-x;
border-color: #2DB51B;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-style: solid;
height: 50px;
width: 100%;
margin: 0px 0px;
position: relative;
}
.navbar-menu ul {
list-style-type: none;
position: absolute;
display: inline;
}
.navbar-menu li {
display: inline;
position: relative;
}
.navbar-menu a {
text-decoration: none;
color: #FFFFFF
}
.navbar-btn {
background-color: #44D1DB;
border-radius: 7px;
border: 1px solid #65A6AB;
height: 20px;
width: 45px;
padding: 10px;
position: relative;
}
.navbar-btn:hover {
background-color: #6CCCF5;
}
Basically i'm trying to make it go more up as it's completely stuck
down. Here is the HTML i'm using:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>Button</title>
</head>
<body>
<div class="navbar-menu">
<ul>
<div class="navbar-btn"><li>HTML</li></div>
</ul>
</div>
</body>
</html>
You can use JSFiddle and see how it looks like, I'm not sure how to fix it, I tried putting position: relative; in attempt to fix it.
Top, margin-bottom just make it go up a little, I want it fitting right on the navbar. Can someone help?
Try this:
CSS:
body {
font-family:'Open Sans', sans-serif;
background-color: #DB1F1F;
}
.navbar-menu {
background-image: linear-gradient(bottom, rgb(72, 174, 52) 41%, rgb(101, 209, 78) 71%);
background-image: -o-linear-gradient(bottom, rgb(72, 174, 52) 41%, rgb(101, 209, 78) 71%);
background-image: -moz-linear-gradient(bottom, rgb(72, 174, 52) 41%, rgb(101, 209, 78) 71%);
background-image: -webkit-linear-gradient(bottom, rgb(72, 174, 52) 41%, rgb(101, 209, 78) 71%);
background-image: -ms-linear-gradient(bottom, rgb(72, 174, 52) 41%, rgb(101, 209, 78) 71%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.41, rgb(72, 174, 52)), color-stop(0.71, rgb(101, 209, 78)));
background-repeat: repeat-x;
border-color: #2DB51B;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-style: solid;
height: 50px;
width: 100%;
margin: 0px 0px;
position: relative;
}
.navbar-menu ul {
list-style-type: none;
position: relative;
display: inline;
}
.navbar-menu li {
display: inline;
position: relative;
}
.navbar-menu a {
text-decoration: none;
color: #FFFFFF
}
.navbar-btn {
background-color: #44D1DB;
border-radius: 7px;
border: 1px solid #65A6AB;
height: 20px;
width: 45px;
padding: 10px;
display: inline-block;
}
.navbar-btn:hover {
background-color: #6CCCF5;
}
Demo.
Remove this <div class="navbar-btn"><li>HTML</li></div> with this <li class="navbar-btn">HTML</li>