I am using the Semantic UI.
and here is my HTML JSFiddle
:
<div class="ui items" id="test">
<div class="item">
<div class="content">
<div class="meta">two days ago</div>
<div class="name">hello</div>
<div class="extra">ten pages</div>
<p class="description">I am a pythoner</p>
</div>
</div>
</div>
And the CSS:
#test{
height:100px;
}
But it seems that CSS does't work. I can't change the height.
where did these go wrong?
You SemanticUI.css contains some base theming which determines the height of the .item class.
.ui.items>.row>.item, .ui.items>.item {
display: block;
float: left;
position: relative;
top: 0;
width: 316px;
min-height: 375px; /* here */
margin: 0 .5em 2.5em;
padding: 0;
background-color: #FFF;
line-height: 1.2;
font-size: 1em;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1);
box-shadow: 0 0 0 1px rgba(0,0,0,.1);
border-bottom: .2em solid rgba(0,0,0,.2);
border-radius: .33em;
-webkit-transition: -webkit-box-shadow .2s ease;
transition: box-shadow .2s ease;
padding: .5em;
}
You will need to change or delete that property.
Related
I have a main position: relative.
Nested (input check box) position: absolute.
When the checkbox is checked the inside div color will scale to 500px. The problem is the color will spill out its main .
Here is the screen shot of the checkbox border spilling out of the main square . https://pasteboard.co/I7uA6am.jpg
What I am trying to do is When we click the circle checkbox at the bottom right. The background color of that checkbox will fill the entire main which is a rectangle of 300px by 400px. In this case the checkbox border takes almost the entire screen as it is set to 500px.
I have tried
- Z-index
- Setting the width of the box-shadow transform to 100% width of the main
- overflow: hidden.
- position: absolute;
None of those solutions worked.
// HTML CODE //
<div class="card">
<input type="checkbox" name="">
<div class="toggle">+</div>
<div class="imgBox"> </div>
<div class="content"> </div>
<div class="details">
<h2>A quick check on CSS</h2>
<p> Just doing a quick test on CSS</p>
</div>
</div>
// CSS CODE //
card {
position: relative;
width: 300px;
height: 400px;
background: #262626;
}
input,
.toggle {
position: absolute;
width: 50px;
height: 50px;
bottom: 20px;
right: 20px;
border: none;
outline: none;
z-index: 10;
}
input {
opacity: 0;
}
.toggle {
pointer-events: none;
border-radius: 50%;
background: #fff;
transition: 0.5s;
text-align: center;
font-size: 36px;
line-height: 40px;
box-shadow: 0 0 0 0px #9c27b0;
overflow: hidden;
}
/* WHEN INPUT IS SET TO CHECK, TOGGLE APPEARS */
input:checked ~ .toggle {
box-shadow: 0 0 0 500px #9c27b0;
transform: rotate(500);
}
As i understand you would need overflow:hidden on the .card. please let me know if this is what you were looking for
.card {
position: relative;
width: 300px;
height: 400px;
background: #262626;
overflow: hidden;
}
input,
.toggle {
position: absolute;
width: 50px;
height: 50px;
bottom: 20px;
right: 20px;
border: none;
outline: none;
z-index: 10;
}
input {
opacity: 0;
}
.toggle {
pointer-events: none;
border-radius: 50%;
background: #fff;
transition: 0.5s;
text-align: center;
font-size: 36px;
line-height: 40px;
box-shadow: 0 0 0 0px #9c27b0;
overflow: hidden;
}
input:checked~.toggle {
box-shadow: 0 0 0 300px #9c27b0;
transform: rotate(500);
}
<div class="card">
<input type="checkbox" name="">
<div class="toggle">+</div>
<div class="imgBox"> </div>
<div class="content"> </div>
<div class="details">
<h2>A quick check on CSS</h2>
<p> Just doing a quick test on CSS</p>
</div>
</div>
is this how you want it?
card {
position: relative;
width: 300px;
height: 400px;
background: #262626;
}
input,
.toggle {
position: absolute;
width: 50px;
height: 50px;
bottom: 20px;
right: 20px;
border: none;
outline: none;
z-index: 10;
}
input {
opacity: 0;
}
.toggle {
pointer-events: none;
border-radius: 50%;
background: #fff;
transition: 0.5s;
text-align: center;
font-size: 36px;
line-height: 40px;
box-shadow: 0 0 0 0px #9c27b0;
overflow: hidden;
}
input:checked~.toggle {
box-shadow: 0 0 0 300px #9c27b0;
transform: rotate(500deg);
background-color: #9c27b0;
}
<div class="card">
<input type="checkbox" name="">
<div class="toggle">+</div>
<div class="imgBox"> </div>
<div class="content"> </div>
<div class="details">
<h2>A quick check on CSS</h2>
<p> Just doing a quick test on CSS</p>
</div>
</div>
I have an element which displays process arrows. If I reduce the screen size, the edges from the outer process steps are being cut off.
It seems, that the borders of the Bootstrap column get over the arrows.
How can I protect the element from being cut off?
<div class="row">
<div class="col-md-4">
<h2>Headline</h2>
</div>
<div class="col-md-4">
<div align="center" class='steps-container'>
<div class='steps active'>
<span>Step 1</span>
</div>
<div class='steps' routerLink="/Step2">
<span>Step 2</span>
</div>
<div class='steps'>
<span>Step 3</span>
</div>
</div>
</div>
<div class="col-md-4"> </div>
</div>
*,
*:after,
*:before {
box-sizing: border-box;
}
.steps-container {
overflow: hidden;
margin: 0px;
padding: 0px;
white-space: nowrap;
border-left: 0px solid;
border-right: 0px solid;
width: 100%;
counter-reset: steps;
}
.steps {
position: relative;
display: inline-block;
left: -28px; /* -2px default + 26px offset to hide skewed area on the left side of first element*/
height: 50px;
line-height: 50px;
margin-left: 0px;
margin-right: 0px;
counter-increment: steps;
cursor: pointer;
transition: background 1s;
min-height: 50px;
min-width: 150px;
}
.steps:after,
.steps:before {
position: absolute;
left: 0px;
height: 50%;
width: 100%;
border-top: 2px solid;
border-bottom: 2px solid;
border-left: 3px solid; /* thicker border as skew makes them look thin */
border-right: 3px solid;
}
.steps:before {
transform: skew(45deg);
top: 0px;
border-bottom: none;
transform-origin: top left;
}
.steps span {
display: block;
padding-left: 40px;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
height: 75%;
}
...
It would be lovely to have the option of where to place a box-shadow. Currently I have a div with some padding. The background color is set to clip on the content-box. That's good. However the box-shadow that I have appear on hover begins at the border-box. Perhaps there is some super secret css I don't know (one can wish, right?)
I know I can add another div after .wrapper, but I'm looking to avoid that. More curious if it is actually possible to position the box-shadow on the content-box.
.page {
background: #e9e9e9 none repeat scroll 0 0;
min-height: 100vh;
height:100%;
width: 100%;
}
.container {
width: 30%;
margin: 0 auto;
padding-top: 50px;
}
.wrapper {
padding-bottom: 1em;
padding-right: 1em;
background: white none repeat scroll 0 0;
color: #666;
transition: box-shadow 0.2s ease-in-out 0s;
background-clip:content-box;
}
.wrapper:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
img{width:100%;}
<div class="page">
<div class="container">
<div class="wrapper">
<a href="#">
<img src="http://placekitten.com/g/330/175">
<div class="content-wrapper">
<h4>Events</h4>
<p>Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer?</p>
</div>
</a>
</div>
</div>
You do already have this wrapper you talk about , the <a> around it.
You need to style it too and apply the shadow to it:
.wrapper a {
padding-bottom:1px;/* to deal with collapsing margin if not reset (to <p> here) */
display:block;
transition: box-shadow 0.2s ease-in-out 0s;
}
.wrapper a:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.page {
background: #e9e9e9 none repeat scroll 0 0;
min-height: 100vh;
height:100%;
width: 100%;
}
.container {
width: 30%;
margin: 0 auto;
padding-top: 50px;
}
.wrapper {
padding-bottom: 1em;
padding-right: 1em;
background: white none repeat scroll 0 0;
color: #666;
background-clip:content-box;
}
.wrapper a {
padding-bottom:1px;
display:block;
transition: box-shadow 0.2s ease-in-out 0s;
}
.wrapper a:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
img{width:100%;}
<div class="page">
<div class="container">
<div class="wrapper">
<a href="#">
<img src="http://placekitten.com/g/330/175">
<div class="content-wrapper">
<h4>Events</h4>
<p>Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer?</p>
</div>
</a>
</div>
</div>
pseudo approach
.page {
background: #e9e9e9 none repeat scroll 0 0;
min-height: 100vh;
height:100%;
width: 100%;
}
.container {
width: 30%;
margin: 0 auto;
padding-top: 50px;
}
.wrapper {
padding-bottom: 1em;
padding-right: 1em;
background: white none repeat scroll 0 0;
color: #666;
background-clip:content-box;
position:relative;
}
.wrapper:before {
content:'';
position:absolute;
pointer-events:none; /* allow to reach links or inside wrapper content */
top:0;
bottom:1em;
left:0;
right:1em;
transition: box-shadow 0.2s ease-in-out 0s;
}
.wrapper:hover:before {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
img{width:100%;}
<div class="page">
<div class="container">
<div class="wrapper">
<a href="#">
<img src="http://placekitten.com/g/330/175">
<div class="content-wrapper">
<h4>Events</h4>
<p>Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer?</p>
</div>
</a>
</div>
</div>
Just use margin-bottom: 1em; margin-right: 1em; in your wrapper instead of padding.
CODE SNIPPET:
.page {
background: #e9e9e9 none repeat scroll 0 0;
min-height: 100vh;
height:100%;
width: 100%;
}
.container {
width: 30%;
margin: 0 auto;
padding-top: 50px;
}
.wrapper {
margin-bottom: 1em;
margin-right: 1em;
background: white none repeat scroll 0 0;
color: #666;
transition: box-shadow 0.2s ease-in-out 0s;
background-clip:content-box;
}
.wrapper:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
img{width:100%;}
<div class="page">
<div class="container">
<div class="wrapper">
<a href="#">
<img src="http://placekitten.com/g/330/175">
<div class="content-wrapper">
<h4>Events</h4>
<p>Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer?</p>
</div>
</a>
</div>
</div>
Another way is to apply the padding-top to the .page class instead of the .container class. A code snippet below might explain
.page {
background: #e9e9e9 none repeat scroll 0 0;
min-height: 100vh;
height: 100%;
width: 100%;
padding-top: 50px;
}
.container {
width: 30%;
margin: 0 auto;
}
.wrapper {
padding-bottom: 1em;
padding-right: 1em;
background: white none repeat scroll 0 0;
color: #666;
transition: box-shadow 0.2s ease-in-out 0s;
}
.wrapper:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
img {
width: 100%;
background-clip: content-box;
}
<div class="page">
<div class="container">
<div class="wrapper">
<a href="#">
<img src="http://placekitten.com/g/330/175">
<div class="content-wrapper">
<h4>Events</h4>
<p>Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer?</p>
</div>
</a>
</div>
</div>
</div>
Here's a solution that works with background-clip:content-box;
Use the following instead of box-shadow :
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.15));
-webkit-filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.15));
I have a column div with many rows. Rows items are made dynamic so i don't know how many items each row will have.
When I hover over an item I want to increase the width and height of the item. The problem is that when I hover over an item of the row which has the most items it will push everything down (last row in my demo).
Is there a way to fix that without using jQuery to find the height of the largest row and add it as height on selector class? Is this possible? And if it isn't possible can I make an item either hovering over the item bellow it or making the item bellow it decrease its height so I won't have that problem?
Thanks in advance for your replies
PS: Text also increases when hovering I just forgot to add it on demo and it's not important.
HTML
<div class="section columns">
<div class="column">
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 1
</div>
</div>
</div>
<div class="column">
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 2
</div>
</div>
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 3
</div>
</div>
</div>
<div class="column">
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 4
</div>
</div>
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 5
</div>
</div>
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 6
</div>
</div>
</div>
</div>
<div>
I don't want this text to move when i hover and height increases
</div>
CSS
.section.columns {
width: 1340px;
color:#fff;
}
.section {
margin-left: auto;
margin-right: auto;
width: 1340px;
padding-left: 3px;
}
.column {
display: inline-block;
width: 180px;
position: relative;
vertical-align: top;
margin-right: 10px;
font-family: 'Teko',sans-serif;
padding-bottom: 20px;
}
.column .row:hover {
width:207px;
height:40px;
z-index:1000;
}
.column .row {
width: 180px;
height: 35px;
background-color: #1d1d1d;
position: relative;
overflow: hidden;
border-bottom: 1px solid #585858;
border-right: 1px solid #585858;
cursor: pointer;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.column .row:hover .background {
background-position: center;
width: 207px;
height: 40px;
opacity: .8;
-webkit-filter: unset;
-moz-filter: unset;
-o-filter: unset;
-ms-filter: unset;
filter: unset;
}
.column .row .background {
background-image:url("http://i.imgur.com/wSofTXx.jpg");
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-position: center;
background-repeat: no-repeat;
background-size: 207px 40px;
width: 180px;
z-index: 0;
opacity: .3;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.notransition {
-webkit-transition: none!important;
-moz-transition: none!important;
-o-transition: none!important;
-ms-transition: none!important;
transition: none!important;
}
.column .row .borders {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-left: 4px solid #2887ff;
border-bottom: 1px solid rgba(0,0,0,.5);
border-right: 1px solid rgba(0,0,0,.5);
z-index: 1;
}
.column .row .score {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 40px;
line-height: 35px;
font-size: 1.5em;
text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
background-color: rgba(0,0,0,.5);
text-align: center;
z-index: 5;
border-left: 1px solid #3e3e3e;
}
.column .row .text {
z-index: 2;
width: 180px;
height: 36px;
line-height: 35px;
padding-left: 18px;
position: absolute;
text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
word-wrap: break-word;
font-size: 1.5em;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
-moz-transition: all .3s ease;
}
DEMO
Instead of changing it's height, why not change it's scale. Scale doesn't impact the natural flow of elements, and all elements will behave as if the size of the target hasn't changed.
.row {
transform-origin: 0% 50%;
}
.row:hover {
transform: scale(1.2);
}
Transform origin is used to make sure the element moves to the right when scaling instead of expanding in all directions.
I have a blog element which has 2 children: .blog-header (contains background image) and .blog-body.. When hovering the mouse on .blog-header, i expect the image to be scaled perfectly. But here's the problem: the image takes the space where .blog-body should lay on
Here's my code:
.blog {
background: white;
margin-top: 20px;
border-top: 3px primary solid;
border-bottom 3px solid #eee;
}
.blog .blog-header {
overflow: hidden;
z-index 90;
}
.blog .blog-header .blog-bg-header {
height: 275px;
background-position: center;
background-size: cover;
transition: 0.25s ease-in-out;
}
.blog .blog-header .blog-bg-header:hover {
cursor: pointer;
transform: scale(1.3);
}
.blog-body {
margin: -60px 20px 0 20px;
padding: 20px 20px 10px 20px;
background: white;
z-index 100;
}
<article class="blog">
<header class="blog-header">
<div class="blog-bg-header" style="background-image: url('http://placehold.it/1350x750')"></div>
</header>
<div class="blog-body">
<time class="blog-date">24 Jan</time>
<a href="example.com">
<h2>Title</h2>
<p>Content</p>
</a>
</div>
</article>
The external link to see the issue http://jsfiddle.net/a49evb1q/
Is there any solution to overcome the issue?
Your z-index on .blog-body will have no effect because you aren't giving it a position.
.blog-body {
margin: -60px 20px 0 20px;
padding: 20px 20px 10px 20px;
background: white;
z-index 100;
position: relative; <!-- ADD THIS
}
Example...
.blog {
background: white;
margin-top: 20px;
border-top: 3px primary solid;
border-bottom 3px solid #eee;
}
.blog .blog-header {
overflow: hidden;
z-index 90;
}
.blog .blog-header .blog-bg-header {
height: 275px;
background-position: center;
background-size: cover;
transition: 0.25s ease-in-out;
}
.blog .blog-header .blog-bg-header:hover {
cursor: pointer;
transform: scale(1.3);
}
.blog-body {
margin: -60px 20px 0 20px;
padding: 20px 20px 10px 20px;
background: white;
z-index 100;
position:relative;
}
<article class="blog">
<header class="blog-header">
<div class="blog-bg-header" style="background-image: url('http://placehold.it/1350x750')"></div>
</header>
<div class="blog-body">
<time class="blog-date">24 Jan</time>
<a href="example.com">
<h2>Title</h2>
<p>Content</p>
</a>
</div>
</article>
EDIT
Actually, you can remove the z-index values from your code altogether. A position: relative will do the trick on it's own
Updated example...
.blog {
background: white;
margin-top: 20px;
border-top: 3px primary solid;
border-bottom 3px solid #eee;
}
.blog .blog-header {
overflow: hidden;
}
.blog .blog-header .blog-bg-header {
height: 275px;
background-position: center;
background-size: cover;
transition: 0.25s ease-in-out;
}
.blog .blog-header .blog-bg-header:hover {
cursor: pointer;
transform: scale(1.3);
}
.blog-body {
margin: -60px 20px 0 20px;
padding: 20px 20px 10px 20px;
background: white;
position:relative;
}
<article class="blog">
<header class="blog-header">
<div class="blog-bg-header" style="background-image: url('http://placehold.it/1350x750')"></div>
</header>
<div class="blog-body">
<time class="blog-date">24 Jan</time>
<a href="example.com">
<h2>Title</h2>
<p>Content</p>
</a>
</div>
</article>