We developed chat application looks like watts-app. we finished everything but i want to show name and current time in chat message box. how to do that
requirement screen shot
.left {
position: relative;
background: white;
text-align: right;
padding: 10px 15px;
border-radius: 6px;
border: 1px solid #ccc;
float: right;
right: 20px;
}
.left::before {
content: '';
position: absolute;
visibility: visible;
top: -1px;
right: -10px;
border: 10px solid transparent;
border-top: 10px solid #ccc;
}
.left::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
right: -8px;
border: 10px solid transparent;
border-top: 10px solid white;
clear: both;
}
div{
clear: right;
}
<div class="left">
<p style="margin-top: 0px;margin-bottom: 0px;color:green;font-size: 11px;">Kranti</p>
<span>thanks</span>
<p style="float: left;margin-bottom: 0px;color:red;font-size: 11px;">2:33 PM</p>
</div>
You could create multiple span elements with their own classes and style the username and time to their position.
Use absolute positioning to get the styling as your provided image.
Here you go: https://jsfiddle.net/keqh0cqw/1/
An example of your new html:
<div class="right">
<span class="username">kranthi</span>
<span class="message">thanks</span>
<span class="time">12:08</span>
</div>
Related
Here's what I have so far:
.buck-knives-inner-nav {
display: flex;
border: 1px solid #707070;
}
.buck-knives-inner-nav-tab {
text-align: center;
padding: 10px;
width: 100px;
}
.buck-knives-inner-nav-tab:not(:last-child) {
border-right: 1px solid #707070;
}
.active {
background-color: #0B0E55;
color: #ffffff;
}
/*
.active::after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0B0E55;
}*/
<div class="buck-knives-inner-nav">
<div class="buck-knives-inner-nav-tab active">
Hold Old is My Knife?
</div>
<div class="buck-knives-inner-nav-tab">
Knife Sharpening
</div>
<div class="buck-knives-inner-nav-tab">
Safety Tips
</div>
<div class="buck-knives-inner-nav-tab">
Knife Care
</div>
<div class="buck-knives-inner-nav-tab">
Choosing the Right Knife
</div>
<div class="buck-knives-inner-nav-tab">
Buck's Forever Warranty
</div>
</div>
I'm wondering - is it possible to style the active tab differently so that it points downward at the bottom center, like I have it in the following mockup?
I tried to implement the downward-facing triangle effect that's used in this article:
https://css-tricks.com/snippets/css/css-triangle/
adding it as an ::after to the active tab - so why didn't that have any effect?
.active::after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0B0E55;
}
Also tried something similar - what I found here: Center Triangle at Bottom of Div
All other ideas / suggestions are welcome!
You were missing the position on the after element.
I've added a position: relative; on the buck-knives-inner-nav-tab and some more positioning on the after:
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
.buck-knives-inner-nav {
display: flex;
border: 1px solid #707070;
}
.buck-knives-inner-nav-tab {
text-align: center;
padding: 10px;
width: 100px;
position: relative;
}
.buck-knives-inner-nav-tab:not(:last-child) {
border-right: 1px solid #707070;
}
.active {
background-color: #0B0E55;
color: #ffffff;
}
.buck-knives-inner-nav-tab.active:after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0B0E55;
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
}
<div class="buck-knives-inner-nav">
<div class="buck-knives-inner-nav-tab active">
Hold Old is My Knife?
</div>
<div class="buck-knives-inner-nav-tab">
Knife Sharpening
</div>
<div class="buck-knives-inner-nav-tab">
Safety Tips
</div>
<div class="buck-knives-inner-nav-tab">
Knife Care
</div>
<div class="buck-knives-inner-nav-tab active">
Choosing the Right Knife
</div>
<div class="buck-knives-inner-nav-tab">
Buck's Forever Warranty
</div>
</div>
we are developing chat application in that chat how much content will have that much width we want displaying separately one by one. and also chat length is big displaying of chat content in multi line.
We are displaying the content and how much content have that much size of width div displaying but side by side div is coming. we want to display step by step how to do.and if content length is long then displaying to multi line.
.right {
position: relative;
background: white;
text-align: right;
padding: 10px 15px;
border-radius: 6px;
border: 1px solid #ccc;
float: right;
right: 20px;
}
.right::before {
content: '';
position: absolute;
visibility: visible;
top: -1px;
right: -10px;
border: 10px solid transparent;
border-top: 10px solid #ccc;
}
.right::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
right: -8px;
border: 10px solid transparent;
border-top: 10px solid white;
clear: both;
}
<div>
<div class="right">
<span>thanks</span>
</div>
<div class="right">
<span>thanks</span>
</div>
</div>
<div>
<div class="right">
<span>thanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanks</span>
</div>
</div>
You have to clear the right float with overflow: hidden; for instance.
<div class="clear">
<div class="right">
<span>thanks</span>
</div>
</div>
<div class="clear">
<div class="right">
<span>thanks</span>
</div>
</div>
<div class="clear">
<div class="right">
<span>thregre gerg ergr geg reger ger gergregeg erger gerg erg erg ergergerger ge anks</span>
</div>
</div>
CSS
.clear { overflow: hidden; margin-bottom: 10px;}
Fiddle
You can use word-break:break-all(or normal|break-all|keep-all) Break words between any two letters.
and use clear property control the behavior of floating elements.
.right {
position: relative;
background: white;
text-align: right;
padding: 10px 15px;
border-radius: 6px;
border: 1px solid #ccc;
float: right;
right: 20px;
}
.right span{
word-break: break-all;
}
.fix{
clear:both;
}
.right::before {
content: '';
position: absolute;
visibility: visible;
top: -1px;
right: -10px;
border: 10px solid transparent;
border-top: 10px solid #ccc;
}
.right::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
right: -8px;
border: 10px solid transparent;
border-top: 10px solid white;
clear: both;
}
<div class="fix">
<div class="right">
<span>thanks</span>
</div>
</div>
<div class="fix">
<div class="right">
<span>thanks</span>
</div>
</div>
<div class="fix">
<div class="right">
<span>thanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanks</span>
</div>
</div>
I need to make a textbox with the same designing as we have in silverlight like this:
Now, the problem is the little triangle at the top right corner of the textbox. I am unable to position it over the textbox. My textbox look something like this:
HTML:
<div id='wrap'>
<input type="text" id="validateInput"/>
<span>
<img src="http://snag.gy/C3CDl.jpg" class="triangleimg">
</span>
</div>
CSS:
#validateInput
{
background-color: #FFFFE0;
border: 1px solid red;
height:20px;
}
.triangleimg
{
vertical-align:top;
position:absolute;
}
Here is a working demo for the code that so far I have tried. Any help would be appreciated.
You can also use css for arrow if you can change the html structure
#validateInput {
background-color: #FFFFE0;
border: 1px solid red;
height: 20px;
}
#wrap span {
display: inline-block;
position: relative;
overflow: hidden;
}
#wrap span:after {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 0;
height: 0;
border-width: 5px;
border-color: red;
border-style: solid;
transform: rotate(45deg);
box-shadow: 0px 0px 0px 1px #FFFFE0;
}
<div id='wrap'>
<span><input type="text" id="validateInput" /></span>
</div>
Use display: inline-block; and position: relative; to parent div.
And position: absolute; to child span.
#validateInput
{
background-color: #FFFFE0;
border: 1px solid red;
height:20px;
}
.triangleimg
{
vertical-align:top;
}
div {
display: inline-block;
position: relative;
}
span {
position: absolute;
right: -3px;
top: -1px;
}
<div id='wrap'>
<input type="text" id="validateInput"/>
<span>
<img src="http://snag.gy/C3CDl.jpg" class="triangleimg">
</span>
</div>
Working Fiddle
Ty This
Demo
body{
background-color: #EEE;
}
#validateInput
{
background-color: #FFFFE0;
border: 1px solid red;
height:20px;
}
.item {
display: inline-block;
position: relative;
}
.item:after
{
content:'';
width: 10px;
height: 10px;
display:block;
background-image: url('http://i.snag.gy/C3CDl.jpg');
position: absolute;
right: -3px;
top: -1px;
}
<div id='wrap'>
<div class="item">
<input type="text" id="validateInput" />
</div>
</div>
Use position:absolute for your image and make the span as relative. After that use negative left position to make the desired result.
.triangleimg
{
vertical-align:top;
position:absolute;
left:-7px;
}
DEMO
I'm building a calendar, and this is what I'm after:
http://postimg.org/image/vpd10bkqt/
So basically I want to show all the events as a small rectangle inside the
appropriate day's big rectangle.
The difficulty is the first element should be shown at the bottom right corner,
and should be filling form right to left and bottom to top.
I think the simplest solution would be if a rectangle would be a
span element with a solid border around it, and it contains a dot as text.
Here is a jsfiddle demo:
http://jsfiddle.net/jv392gmv/
CSS:
section#calendar {
width: 970px;
}
time {
display: inline-block;
width: 120px;
height: 120px;
margin: 4px;
text-align: right;
font-size: x-large;
font-weight: 900;
border: 1px solid #c3c7c7;
border-radius: 5px;
background: #fff;
}
time.notmonth {
background: #777;
}
section#calendar h1 {
text-align: center;
}
section#calendar time a {
display: inline-block;
width: 110px;
height: 110px;
margin: 5px 5px 0 0;
padding: 3px 3px 0 0;
color: #f55b2c;
text-decoration: none;
}
section#calendar time a:hover {
color: #000;
}
span.event {
top: 10%;
left: 7px;
position: relative;
border-color: #222;
border-style: solid;
border-radius: 5px;
border-width: 5px;
}
HTML:
<section id="calendar">
<h1>
←
July 2015
→
</h1>
<time datetime="2011-05-29">
29
<!-- <span class="event">.</span> -->
</time>
</section>
Anyone has any idea how to achieve it?
The original time tag idea came from here:
http://thenewcode.com/355/HTML5-Calendar-With-CSS3-and-Microdata
In the container, set a rotation of 180 deg.
In the children, rotate again to get them upright
.base {
width: 140px;
height: 140px;
border: solid 1px black;
position: relative;
}
.test {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
transform: rotate(180deg);
}
.children {
width: 40px;
height: 40px;
background-color: lightblue;
transform: rotate(180deg);
display: inline-block;
margin: 2px;
}
<div class="base">
<div >123</div>
<div class="test">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
<div class="children">5</div>
<div class="children">6</div>
<div class="children">7</div>
</div>
</div>
I am trying to display a few words inside of a CSS styled arrow. I have figured out how to create an arrow with CSS which works fine. however, when I place the arrow within <h2>, complete arrow is not being displayed.
The source code is as follows
HTML
<div style="background-color: yellow;">
<h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>
STYLE
<style>
.arrow-right::after{
content: "";
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid green;
}
</style>
The output is as follows
The arrow pointer is not being displayed completely. Am I using the elements wrongly? I will need the div / h2 height to be bigger later, but at least that is not my concern right now since the arrow itself is not being displayed as desired.
Edit:
Sorry for my bad drawing. This sample below is what I want but of course the arrow would be lots nicer I just used paints to give it a quick draw.
Is this what you're looking for?
http://jsfiddle.net/61tc5em9/2/
HTML
<div id="container">
<div id="arrow">text text text</div>
<div id="content">text text text text</div>
</div>
CSS
#container {
height: 75px;
background-color: black;
position: relative;
white-space: nowrap;
}
#arrow {
width: 30%;
background-color: red;
text-align: center;
font-size: 1.5em;
line-height: 75px;
}
#arrow::after {
content: "";
border-top: 37px solid transparent;
border-bottom: 38px solid transparent;
border-left: 50px solid red;
position: absolute;
left: 30%;
}
#content {
color: yellow;
font-size: 1.5em;
position: absolute;
left: 50%;
top: 25px;
}
Hope this helps. Let me know if you need any changes.
You need font-size:0; for the arrow.
.arrow-right::after {
content: "";
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid green;
font-size: 0;
position: relative;
top: -8px;
}
span{
display: inline-block;
}
<div style="background-color: yellow;">
<h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>
Recommendations for improving your code and make it more dynamic:
Use :after in the statement element itself (this way you will avoid
the extra code in html and you can position the arrow relative to the element).
Align it to the right using left: 100% (so it is always position to
the right regardless of the width of the arrow).
Use top: 50% and margin-top: -(height/2)px to center it vertically.
Just like this:
.wrapper {
padding: 2px 0;
background: yellow;
}
.statement {
position: relative;
background: green;
}
.statement:after {
content:"";
border-top: 15px solid transparent; /*change the border width to set the desired hieght of the arrow*/
border-bottom: 15px solid transparent;
border-left: 15px solid green; /*change the border width to set the desired width of the arrow*/
position: absolute;
left: 100%;
top: 50%;
margin-top: -15px; /*the element has height= 30px (border-top + border-bottom) to center it -height /2 */
}
h2{
margin: 0;
}
<div class="wrapper">
<h2>
<span class="statement">This is what I want</span>
<span style="margin-left: 50px;">is this what you want?</span>
</h2>
</div>
Note that in this way you have a more semantic code because you don't have dummy element in your html and if you want more statement it will put the arrow behind automatically like this:
.wrapper {
padding: 2px 0;
background: yellow;
margin-bottom: 10px;
}
.statement {
position: relative;
background: green;
}
.statement:after {
content:"";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid green;
position: absolute;
left: 100%;
top: 50%;
margin-top: -15px; /*the element has height= 30px (border-top + border-bottom) to center it -height /2 */
}
h2{
margin: 0;
}
<div class="wrapper">
<h2>
<span class="statement">One statement</span>
<span style="margin-left: 50px;">Good</span>
<span class="statement">Two statement</span>
<span style="margin-left: 50px;">Great</span>
</h2>
</div>
<div class="wrapper">
<h2>
<span class="statement">Where is the arrow?</span>
<span style="margin-left: 50px;">Do not worry about it</span>
</h2>
</div>