FIDDLE DEMO
I've got a problem where I have a container that has a max-height set, however for an unknown reason the wrapper constantly shows the vertical scroll bar.
The only thing I can find that might be the problem is the :after pseudo class on the .right class. If I remove this the scroll bars go. Why is this? The :after content is positioned absolutely, it shouldn't have any affect on the scroll bar...
For reference, the max-height that's not being reached is set on the .emails class
This is the CSS that matters - couple of extra bits on the fiddle;
.indicator_triangle {
position: absolute;
bottom: -24px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 12.5px 20px 12.5px;
border-color: transparent transparent #fff transparent;
}
.comm_dd {
position: absolute;
top: 15px;
border: 3px solid $green;
display: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
border: 3px solid $green;
width: 170px;
background-color: #fff;
z-index: 10;
list-style: none;
margin: 0;
padding: 5px;
width: 350px;
font-size: 12px;
.e_container {
.emails {
overflow-y: auto;
// min-height: 180px;
max-height: 350px;
border-top: 1px solid $grey_med;
}
h4 {
margin-top: 0;
margin-bottom: 5px
}
p {
color: #888;
margin-bottom: 4px;
}
}
.left {
width: 72%;
float: left;
div {
margin-right: 15px;
}
}
.right {
width: 25%;
float: left;
font-size: 11px;
&:after {
position: absolute;
top: 14px;
right: 4px;
content:"\00b0";
font-size: 32px;
}
}
.subj {
font-weight: bold;
}
li {
line-height: 16px;
a {
position: relative;
padding: 6px 5px;
display: block;
color: $grey;
border-top: 1px solid #ddd;
color: #888;
padding: 7px 5px;
&:hover {
background-color: darken(#fff, 10%);
}
}
.remaining_count {
top: 9px;
right: 9px;
}
&:first-child a {
border-top: none;
}
}
.indicator_triangle {
top: -15px;
left: 5px;
}
}
You could set overflow:hidden to the .comm_dd li selector to prevent the :after pseudo content from causing the overflow on the list item.
Related
This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 3 years ago.
I am trying to create a button with chopped corner, the only challange is to make that corner transparent, instead of background color of that corner.
Attached the exmple I am trying to achieve
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 30px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.btn-border-tilt:after {
content: "";
width: 24px;
height: 24px;
background: #cccccc;
position: absolute;
right: -12px;
bottom: -12px;
transform: rotate(-132deg);
}
<div class="wrapper">
This is button
</div>
I believe that modifying the button's background - using linear-gradient from transparent to the specific color - is what you're looking for:
background: linear-gradient(315deg, transparent 15px, #07926D 0px);
And in context:
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
padding: 16px 30px;
position: relative;
overflow: hidden;
text-decoration: none;
background: linear-gradient(315deg, transparent 15px, #07926D 0px);
}
<div class="wrapper">
This is button
</div>
You can do something like this, I am in hurry so made this, You can change anything as per your need.
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 10px 16px 35px;
position: relative;
text-decoration: none;
}
.btn-border-tilt:after {
content: "";
width: 0;
position: absolute;
height: 0;
border-style: solid;
border-width: 26px 0px 20px 20px;
border-color: transparent transparent transparent #07926D;
right: -20px;
top: 2px;
}
a.btn-border-tilt:before {
content: "";
width: 0;
position: absolute;
height: 0;
border-style: solid;
border-width: 0px 0 60px 30px;
border-color: transparent transparent transparent #07926D;
right: -4px;
top: -15px;
transform: rotate(90deg);
}
<div class="wrapper">
This is button
</div>
Check this with after and before and changes padding for text center
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 12px 16px 30px;
position: relative;
text-decoration: none;
}
.btn-border-tilt:before {
content: "";
width: 18px;
height: 30px;
background: #07926D;
position: absolute;
right: -18px;
top: 0px;
}
.btn-border-tilt:after {
content: "";
width: 0;
height: 0;
position: absolute;
width: 0;
height: 0;
border-top: 18px solid #07926D;
border-right: 18px solid transparent;
right: -18px;
bottom: 0px;
}
<div class="wrapper">
This is button
</div>
Create a triangle at the bottom.
Reference: CSS Tricks
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 30px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.btn-border-tilt:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
border: 12px solid #aaaaaa;
border-left-color: transparent;
border-top-color: transparent;
}
<div class="wrapper">
This is button
</div>
At the moment my css looks like this:
But I want the inverse of the green border-radius blocks, I want this:
Any idea how to achieve this with the least amount of extra divs and stuff? Here is my code so far:
.navbar {
background-color: blue;
height: 35px;
}
button {
color: white;
border: none;
// background-color: green;
background-color: transparent;
height: 100%;
padding: 0px 10px;
cursor: pointer;
}
button.selected {
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
height: 30px;
vertical-align: bottom;
}
button:after,
button:before {
background-color: rgb(188, 218, 188);
height: 20px;
width: 20px;
position: absolute;
content: '';
bottom: 0px;
}
button:after {
right: -20px;
border-bottom-left-radius: 15px;
}
button:before {
left: -20px;
border-bottom-right-radius: 15px;
}
<div class="navbar">
<button>tab1</button>
<button>tab2</button>
<button class="selected">tab3</button>
<button>tab4</button>
</div>
One possible solution would be using box-shadow for the before and after.
Also you may consider using pointer-events:none for the pseudo-elements since you don't want to block the other elements on the nav.
Another solution would be using svg for your buttons.
.navbar {
background-color: blue;
height: 35px;
overflow:hidden;
}
button {
color: white;
border: none;
background-color: transparent;
height: 100%;
padding: 0px 10px;
cursor: pointer;
}
button.selected {
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
height: 30px;
vertical-align: bottom;
}
button:after,
button:before {
background-color: transparent;
height: 20px;
width: 20px;
position: absolute;
content: '';
bottom: 0px;
box-shadow: 2px 10px 1px white;
pointer-events:none;
}
button:after{box-shadow: -2px 10px 1px white;}
button:after {
right: -20px;
border-bottom-left-radius: 15px;
}
button:before {
left: -20px;
border-bottom-right-radius: 15px;
}
<div class="navbar">
<button>tab1</button>
<button>tab2</button>
<button class="selected">tab3</button>
<button>tab4</button>
</div>
I think you should add a dic contain content text, like this:
.navbar {
background-color: blue;
height: 35px;
}
.content {
color: white;
border: none;
background-color: blue;
height: 100%;
padding: 10px 10px;
cursor: pointer;
}
button{
background-color: white;
padding: 0px;
border: 0px;
margin-left: -4px;
}
button.selected{
background-color: blue;
}
button.selected .content{
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
vertical-align: bottom;
}
button.before-selected .content{
border-bottom-right-radius: 10px;
}
button.after-selected .content{
border-bottom-left-radius: 10px;
}
<div class="navbar">
<button><div class="content">tab1</div></button>
<button class="before-selected"><div class="content">tab2</div></button>
<button class="selected"><div class="content">tab3</div></button>
<button class="after-selected"><div class="content">tab4</div></button>
</div>
I'd suggest using svg with background-image or using the clip-path property on ::before and ::after.
You have to use SVGs on ::before and ::after of the tab element. Here's an example:
header {
background: gray;
}
nav {
padding-top: 10px;
}
.tab {
background: none;
border: none;
padding: 10px;
width: 100px;
}
.tab.selected {
background: white;
border-radius: 10px 10px 0 0;
position: relative;
}
.tab.selected::before,
.tab.selected::after {
content: '';
bottom: 0;
height: 10px;
position: absolute;
width: 10px;
}
.tab.selected::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M 0 10 L 10 10 L 10 0 Q 10 10 0 10 Z' fill='%23ffffff'></path></svg>");
left: -10px;
}
.tab.selected::after {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M 0 10 L 10 10 L 10 0 Q 10 10 0 10 Z' fill='%23ffffff'></path></svg>");
right: -10px;
transform: scaleX(-1);
}
<header>
<nav>
<button class="tab">Tab</button>
<button class="tab selected">Tab</button>
<button class="tab">Tab</button>
</nav>
</header>
Codepen link.
You can use the following property to get the inverted image of the green border radius blocks:
transform: rotate(180deg);
So your CSS will be like:
button:after,
button:before {
background-color: rgb(188, 218, 188);
height: 20px;
width: 20px;
position: absolute;
content: '';
bottom: 0px;
transform: rotate(180deg);
}
Or you can use the following and style it better:
.navbar {
background-color: blue;
height: 35px;
}
button {
color: white;
border: none;
// background-color: green;
background-color: transparent;
height: 100%;
padding: 0px 10px;
cursor: pointer;
}
button.selected {
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
height: 30px;
vertical-align: bottom;
}
button:after,
button:before {
background-color: transparent;
height: 20px;
width: 20px;position: absolute;
content: '';
bottom: 0px;
transform: rotate(180deg);
}
button:after {
right: -20px;
border-bottom-left-radius: 15px;
-webkit-box-shadow: inset 0px 6px 5px 0px #000000;
box-shadow: inset 0px 6px 5px 0px #000000;
}
button:before {
left: -20px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: inset 4px 8px 5px -3px #000000;
box-shadow: inset 4px 8px 5px -3px #000000;
}
<div class="navbar">
<button>tab1</button>
<button>tab2</button>
<button class="selected">tab3</button>
<button>tab4</button>
</div>
When applying transform:scale to my element, the border-colors get messed up. Would like to know if this is a known issue and has a solution? If I remove the scale the animation works fine and borders return to normal. I have also tried both ways, when scaling up and down the issue persists. Tried zoom, transform-origin, nothing seems to fix this weird issue. Also this has no issues in chrome.
JSfiddle
body {
background-color: lightblue;
}
.player-chromecast {
border: 2px solid white;
border-radius: 4px;
width: 22px;
height: 17px;
position: relative;
margin: 10px;
}
.player-chromecast:hover {
transform: scale(1.1)
}
.broadcast {
background-color: lightblue;
width: 18px;
height: 19px;
position: absolute;
bottom: -3px;
left: -2px;
}
.broadcast:after {
content: '';
height: 5px;
width: 5px;
border-top-right-radius: 20px;
position: absolute;
top: 13px;
background-color: white;
}
.reception {
border: 2px solid white;
border-bottom-color: transparent;
border-left-color: transparent;
border-top-right-radius: 20px;
position: absolute;
}
.first-bar {
height: 6px;
width: 6px;
top: 8px;
}
.second-bar {
height: 11px;
width: 11px;
top: 3px;
}
<div class="player-chromecast">
<div class="broadcast">
<div class="reception first-bar"></div>
<div class="reception second-bar"></div>
</div>
</div>
body {
background-color: #20262e;
}
h1 {
color: white;
text-align: center;
}
.player-chromecast:hover .reception {
border-bottom-color: transparent;
border-left-color: transparent;
}
p {
font-family: verdana;
font-size: 20px;
}
.player-chromecast {
border-left: 1px solid #fff !important;
border: 2px solid white;
border-radius: 4px;
width: 22px;
height: 17px;
position: relative;
margin: 10px;
border-bottom: 1px solid #fff !important;
}
.player-chromecast:hover {
transform: scale(1.1)
}
.broadcast {
background-color: #20262e;
width: 18px;
height: 19px;
position: absolute;
bottom: -3px;
left: -2px;
}
.broadcast:after {
content: '';
height: 5px;
width: 5px;
border-top-right-radius: 20px;
position: absolute;
top: 13px;
background-color: white;
}
.reception {
border: 2px solid white;
border-bottom-color: transparent;
border-left-color: transparent;
border-top-right-radius: 20px;
position: absolute;
}
.first-bar {
height: 6px;
width: 6px;
border-left: 0px;
top: 8px;
}
.second-bar {
height: 11px;
width: 11px;
border-left: 0px;
top: 3px;
}
<!DOCTYPE html>
<div class="player-chromecast">
<div class="broadcast">
<div class="reception first-bar"></div>
<div class="reception second-bar"></div>
</div>
</div>
Please check now in firefox or any other browsers it working correctly i mean border is not there on hover .....Let me know if you still get same bugs
I have an animated button which has an text below it, and it was made with an :after selector. That button shifts 2px downward when it is active(clicked) and box-shadow gets removed hence giving the click effect. But this is also changing the position of element created with :after selector. How can I make the text to be always still?
.start {
width: 20px;
height: 20px;
border-radius: 50%;
border: 4px solid #444444;
margin-left: 20px;
margin-top: 8px;
background-color: #FC0102;
box-shadow: 0px 2px 5px black;
position: relative;
}
.start:active {
box-shadow: 0px 0px 5px black;
top: 2px;
}
.start:after {
content: "Start";
position: absolute;
top: 25px;
font-size: 13px;
left: -4px;
}
<div class="start"></div>
Add the same amount of offset to the pseudo text on :active:
.start:active:after {
margin-top: -2px;
}
Snippet:
.start {
width: 20px;
height: 20px;
border-radius: 50%;
border: 4px solid #444444;
margin-left: 20px;
margin-top: 8px;
background-color: #FC0102;
box-shadow: 0px 2px 5px black;
position: relative;
}
.start:active {
box-shadow: 0px 0px 5px black;
top: 2px;
}
.start:after {
content: "Start";
position: absolute;
top: 25px;
font-size: 13px;
left: -4px;
}
.start:active:after {
margin-top: -2px;
}
<div class="start"></div>
I'd like to create a thread view (CHAT inbox) like UI using HTML and CSS.
http://jsfiddle.net/7mbaksvj/
My issue is the width of the div. It's coming as a fixed width. But I want it to be auto, based on the length of the content inside, and able to grow to a max of 80% of the width.
I'm using two classes .bubble-right and .bubble-left to align them using margins.
.bubble-left {
margin-top: 1%;
margin-right: 20%;
position: relative;
color: #000;
padding: 5px 20px 5px 20px;
background: #D5D9DB;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble-left:after {
content: '';
position: absolute;
border-style: solid;
border-width: 12px 17px 12px 0;
border-color: transparent #D5D9DB;
display: block;
width: 0;
z-index: 1;
margin-top: -12px;
left: -17px;
top: 60%;
}
.bubble-right {
margin-top: 1%;
position: relative;
color: #fff;
margin-left: 20%;
padding: 5px 20px 5px 20px;
background: #5EC979;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble-right:after {
content: '';
position: absolute;
border-style: solid;
border-width: 12px 0 12px 17px;
border-color: transparent #5EC979;
display: block;
width: 0;
z-index: 1;
margin-top: -12px;
right: -17px;
top: 60%;
}
When CSS float property is used to align left and right, width is proper, but all my divs are getting aligned in a single row.
I'm looking for a solution in CSS and HTML.
You should add the background-color to the P inside your .bubble-(left|right)
I.E.:
.bubble-left, .bubble-right {
position: relative;
clear: both;
padding: 0 17px;
overflow: hidden;
margin-top: 1%;
}
.bubble-left {
margin-right: 20%;
}
.bubble-right {
margin-left: 20%;
}
.bubble-left p, .bubble-right p {
color: #000;
padding: 5px 20px;
line-height: 24px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: auto;
display:inline-block;
margin: 0;
}
.bubble-left p {
background: #D5D9DB;
float: left;
}
.bubble-right p {
background: #5EC979;
float: right;
}
.bubble-left:after, .bubble-right:after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
z-index: 1;
margin-top: -12px;
top: 50%;
}
.bubble-left:after {
left: 0;
border-width: 12px 17px 12px 0;
border-color: transparent #D5D9DB;
}
.bubble-right:after {
right: 0;
border-width: 12px 0 12px 17px;
border-color: transparent #5EC979;
}
display: inline-block; is your answer here, but you need a way of keeping the blocks from lining up on a row. I would wrap each .bubble-left and .bubble-right in another div, then:
.bubble-right, .bubble-left { ... display: inline-block; ... }
Edit
Oh, also on .bubble-right, on each container div, add text-align: right;.
The trick is to float the bubbles to the left or right depending on their class, and importantly clearing the floats on the parent. Do not give a fixed width or margin of 20% as you have given. Just give a max-width of 80% to keep it within limits.
This is how you could do it: (Demo Fiddle http://jsfiddle.net/abhitalks/hL5z0f37/)
Snippet: (only relevant portions of code)
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
.container {
background-color: #eee;
margin: 8px;
height: 80%; width: 50%; /* this height and width is only for demo snippet */
overflow: auto;
}
.bubble { width: 100%; clear: both; } /* clear the floats here on parent */
.bubble p {
border-radius: 5px;
padding: 8px; margin: 8px 12px;
max-width: 80%; /* this will make it not exceed 80% and then wrap */
position: relative;
}
.left p { background-color: #ccc; float: left; } /* floated left */
.right p { background-color: #3c3; float: right; } /* floated right */
/* classes below are only for arrows, not relevant */
.left p::before {
content: ''; position: absolute;
width: 0; height: 0; left: -8px; top: 8px;
border-top: 4px solid transparent;
border-right: 8px solid #ccc;
border-bottom: 4px solid transparent;
}
.right p::after {
content: ''; position: absolute;
width: 0; height: 0; right: -8px; bottom: 8px;
border-top: 4px solid transparent;
border-left: 8px solid #3c3;
border-bottom: 4px solid transparent;
}
<div class="container">
<div class="bubble left"><p>msg</p></div>
<div class="bubble left"><p>long message</p></div>
<div class="bubble right"><p>ultra long message which can wrap at eighty percent </p></div>
<div class="bubble left"><p>lorem ipsum</p></div>
<div class="bubble right"><p>very long message</p></div>
</div>
To make left bubbles look like you want you can make them float: left. For right ones you should float them right. For all bubbles you should use max-width: 80% and use clear: both.
.bubble-left {
margin-top: 1%;
margin-left: 10px;
position: relative;
color: #000;
padding: 5px 20px 5px 20px;
background: #D5D9DB;
border-radius: 10px;
float: left;
clear: both;
max-width: 80%;
}
Demo: http://jsfiddle.net/7mbaksvj/8/
You can use display:table; to make width of elements is following the content inside and make element float:right / float:left and use clear:both; to make sure next element in the next line
Demo : jsFiddle
example for right content :
.bubble-right {
margin-top: 1%;
position: relative;
display:table; /* make display as table */
float:right; /* set float right */
clear:both; /* clear both */
pading-right: 16px; /* add padding */
}
.bubble-right:after {
content: '';
position: absolute;
border-style: solid;
border-width: 12px 0 12px 17px;
border-color: transparent #5EC979;
display: block;
width: 0;
z-index: 1;
margin-top: -19px; /* re-positioning */
right: 0px; /* remove right position */
top: 60%;
}