I was trying to make an animated sidebar with hover, when the mouse goes over the sidebar list item a colored box slides in from the side. For this purpose I used the :after pseudo element to use as the sliding box however it covered the text of the list item. To fix this I set the z-index value of the :after pseudo element to -1. As soon as I made the change the transitions broke, they ease-in without a problem but as soon as the mouse leaves the area, the colored box jumps back immediately without an exit transition. The only thing that works is when keeping the mouse inside of it's parent.
Here's the html
<nav id="sidebar">
<div class="list-group-flush" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action sidebar-item active" href="/home">
<div class="sidebar-item-content">
<i class="fas fa-home sidebar-item-icon"></i>
<span class="sidebar-item-text">Home</span>
</div>
</a>
<a class="list-group-item list-group-item-action sidebar-item" href="/trending">
<div class="sidebar-item-content">
<i class="fas fa-trophy sidebar-item-icon"></i>
<span class="sidebar-item-text">Trending</span>
</div>
</a>
<a class="list-group-item list-group-item-action sidebar-item" href="/create_challenge">
<div class="sidebar-item-content">
<i class="fas fa-plus-circle sidebar-item-icon"></i>
<span class="sidebar-item-text">Create Challenge</span>
</div>
</a>
<a class="list-group-item list-group-item-action sidebar-item" href="/profile">
<div class="sidebar-item-content">
<i class="fas fa-user-circle sidebar-item-icon"></i>
<span class="sidebar-item-text">Profile</span>
</div>
</a>
</div>
</nav>
And here is the SCSS
#sidebar {
height: 100vh;
width: $left-bar-width;
padding-top: spacer(3);
position: fixed;
box-shadow: 0 0 $shadow-spread 0 $shadow-color;
z-index: 1;
clip-path: polygon(0% 0%, add($left-bar-width,$shadow-spread) 0%, add($left-bar-width,$shadow-spread)
100%, 0% 100%);
}
.sidebar-item-content{
padding: $sidebar-item-content-padding;
&:before{
content: '';
position: absolute;
bottom: $sidebar-item-padding-y;
right: $sidebar-item-padding-x;
transition: width 0.4s ease-out;
width: 0%;
height: subtract(100%,2*$sidebar-item-padding-y);
border-radius: $sidebar-item-content-roundness;
background-color: $sidebar-item-content-color;
z-index: -1;
}
&:hover{
&:before{
width: subtract(100%,2*$sidebar-item-padding-x);
}
}
}
.sidebar-item{
padding:
$sidebar-item-padding-y
$sidebar-item-padding-x
$sidebar-item-padding-y
$sidebar-item-padding-x;
&.list-group-item{
border: none;
}
&.list-group-item:hover,:focus{
background-color: initial;
color: initial;
}
&.active{
&.list-group-item{
z-index: initial;
background-color: initial;
color: initial;
}
.sidebar-item-content{
&:before{
width: $sidebar-item-active-width;
}
.sidebar-item-icon{
fill: $sidebar-item-content-color;
}
.sidebar-item-text{
color: $sidebar-item-content-color;
font-weight: bold;
}
}
}
}
Thanks in advance for the help, I admit I'm completely stumped on this one.
Fixed, the parent element had to have a z-index of 2, basically, parent z-index - 1 had to be greater than 0 which was not the case before.
Related
I have some divs with background color and i want to add font-awesome icon over it. The icon is not shown and when i inspect the elements aria-hidden="true" is added in the html tag automatically... How can i deal with the issue.
<div class="">
<div class="service-1">
<i class="fas fa-coffee"></i>
</div>
<p class="mt-2 ml-4">
Lorem Ipsum
</p>
</div>
When i inspect the elements the tag changes to the following:
<i class='fas fa-coffee' aria-hidden='true'></i>
The css for the elements are:
.service-1{
width: 138px;
height: 138px;
background: #EDE10D 0% 0% no-repeat padding-box;
border-radius: 50%;
}
.service-1 > i{
color: #fff;
height: 130px;
width: 130px;
}
I am making a webshop and have encountered a sort of weird bug.
I am trying to make a cart "badge" to easily view how many items that are in the cart. It's a responsive site and the badge is located on a a tag with two spans of display: block inside. On the desktop side the badges css looks like this:
.count::after{
content: "2";
display: inline-block;
background: #FF0000;
border-radius: 20%;
padding: 0 0.5em;
transform: scale(0.7);
color: #FFF;
float: right;
position: absolute;
top: 5px;
right: 1.5em;
}
.count::after:empty{
display: none;
padding: 0
}
Which works fine and the badge displays in the upper right corner. However on mobile, the a tags wrapper goes full-width and using the above css results in the badge flying off to the side of the screen.
Thus i wrote the following mobile code:
#media max-width: 990px{
...
.count::after{
position: relative;
top: -90%;
right: 0;
}
}
However. The top: -90% doesn't register properly.
If i enter the development tools and switch it off and on, it works perfectly. But if i refresh it goes right back down to the bottom of the icon.
JS-fiddle of the offending part: here
I agree with Shahil, you should set the position:relative to the element with the .count class and set position:absolute and top:-5px (let's say) to the .count::after
Like so:
.d-block{
display: block;
}
.d-inline_block{
display: inline-block;
}
.t-center{
text-align: center;
}
.menu{
width:100%;
text-align: center;
}
.count {
position:relative;
}
.count::after{
content: "2";
display: inline-block;
background: #FF0000;
border-radius: 20%;
padding: 0 0.5em;
transform: scale(0.7);
color: #FFF;
float: right;
position: absolute;
top: -5px;
right: 0;
}
<div class="col-xs-12 col-md-4 my-auto menu t-right">
<a href="/account/login" class="d-inline_block headerLink">
<i class="fa fa-lg fa-user d-block t-center py-8">icon</i>
<span class="d-block t-center">Min konto</span>
</a>
<i class="fa fa-lg fa-question d-block t-center py-8">icon</i><span class="d-block t-center">Kundeservice</span>
<i class="fa fa-lg fa-shopping-cart d-block t-center py-8">icon</i><span class="kurv d-block t-center">Min kurv</span>
</div>
This should work on both Desktop and mobile without using #media queries
I have an image with a font awesome overlay of a plus. When I hover over the image (a tag) I want to display the plus, but I'm not sure if I have the correct css. The plus doesn't show when I hover over it!
Here is my code
a.registerTeacherAsHost:hover {
cursor: pointer !important;
opacity: 0.4;
}
a.registerTeacherAsHost:hover > .addTeacher {
display: normal;
}
<a class="registerTeacherAsHost" data-event-id=#Model.SpaceEvent.YogaSpaceEventId>
<div class="thumbnail">
<div>
<img class="img-responsive" src="~/Images/User_small_compressed_blue.png" style="position: relative; left: 0; top: 0;" alt="no teacher">
<i style="display:none; z-index: 200; position: absolute; top: 35%; right: 42%; color: grey;" class="addTeacher fa fa-plus fa-2x"></i>
</div>
</div>
</a>
Your CSS should look like this
a.registerTeacherAsHost:hover {
cursor: pointer !important;
opacity: 0.4;
}
a.registerTeacherAsHost .addTeacher { display: none; }
a.registerTeacherAsHost:hover .addTeacher {
display: block;
}
And the HTML
<a class="registerTeacherAsHost" data-event-id=#Model.SpaceEvent.YogaSpaceEventId>
<div class="thumbnail">
<div>
<img class="img-responsive" src="~/Images/User_small_compressed_blue.png" style="position: relative; left: 0; top: 0;" alt="no teacher">
<i style="z-index: 200; position: absolute; top: 35%; right: 42%; color: grey;" class="addTeacher fa fa-plus fa-2x">asd</i>
</div>
</div>
</a>
There were three problems with your code,
You were using the ">" selector which will only select the child element (.addTeacher) which is right after the parent element (.registerTeacherAsHost) which in you case doesn't work.
Other than that, the problem was with HTML where you declared the CSS for .addTeacher in the style tag, browsers take the CSS in this tag into consideration over any other stylesheets. One thing that could've worked was adding an !important to a.registerTeacherAsHost:hover .addTeacher { display: block !important; }. But it's better to write styles in a stylesheet and avoid using the !important as much as possible.
Next thing was, you were using display: normal which I've never heard of before and I think the browser hasn't too. display: block does the job.
Here's a fiddle: https://jsfiddle.net/5ncprd90/
Hope it helps!
There's been plenty wrong with your CSS which has been discussed already. I am focusing on a quick solution which goes here. Some adjustments have been made in the HTML structure and you are advised to avoid inline CSS. Hope this is what you are looking for.
a.registerTeacherAsHost{
display:inline-block;
}
a.registerTeacherAsHost:hover .thumbnail img {
cursor: pointer !important;
opacity: 0.4;
}
a.registerTeacherAsHost:hover i.addTeacher {
display: block;
cursor: pointer !important;
}
.thumbnail{
position:relative;
max-width:100%;
}
i.addTeacher{
display:none;
z-index: 200;
position: absolute;
top: 35%;
right: 42%;
color: grey;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="registerTeacherAsHost" data-event-id=#Model.SpaceEvent.YogaSpaceEventId>
<div class="thumbnail">
<img class="img-responsive" src="https://www.shareicon.net/data/128x128/2015/09/24/106425_man_512x512.png" alt="no teacher">
<i class="addTeacher fa fa-plus fa-2x"></i>
</div>
</a>
I am trying to achieve this design having a semicircle with logo inside in the center. Kindly refer to the link given below.
Image
I have tried making a semicircle using CSS but it won't be suitable for the design that I want. I have used 2 jumbotrons, one after the other. The semicircle should cover the area on both jumbotron as in the image(link mentioned above).
Any help is appreciated on how can I achieve this design.
HTML:
<div class="jumbotron">
<div class="container navheader">
<div class="social">
<i class="fa fa-facebook " aria-hidden="true"></i>
<i class="fa fa-google-plus " aria-hidden="true"></i>
<i class="fa fa-instagram " aria-hidden="true"></i>
</div>
<div class="contact-us">
<a href="">
<i class="fa fa-phone " aria-hidden="true">
<label class="icon-label">CALL 0417 949 773</label></i></a>
</div>
</div>
</div>
<div class="jumbotron other-color">
<div class="container navheader">
<div class="user-actions">
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-in">
<i class="fa fa-lock" aria-hidden="true">
<label class="icon-label">SIGN IN</label>
</i>
</button>
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-up">
<i class="fa fa-user " aria-hidden="true">
<label class="icon-label">CREATE AN ACCOUNT</label>
</i>
</button>
</div>
<div class="div-semicircle top"></div>
<div class="cart">
<a href=""><i class="fa fa-shopping-cart " aria-
hidden="true">
<label class="icon-label">2 ITEM(S)</label>
</i></a>
</div>
</div>
</div>
CSS:
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
margin-bottom: 0;
background-color: #5a9f33;
padding: 2em 1em;
}
.other-color {
margin-bottom; 0;
background-color: #67b63d;
padding: 2em 1em;
}
.navheader{
display: inline-block;
width: 100%;
}
.social, .user-actions{
float:left;
}
.contact-us, .cart{
float:right;
}
.sign-up{
background-color:#67b63d;
margin: 0 50px 50px;
padding:20px;
}
input{
padding:15px;
margin:20px;
width:85%;
}
.btn-sign{
background-color: #67b63d;
font-family: serif;
color: white;
border-radius: 30px;
font-size: 2em;
padding: 10px 50px;
margin: 20px auto;
display: block;
}
.title{
font-family: serif;
font-weight: 600;
color: #67b63d;
font-size: 3em;
margin-top:20px;
}
.div-semicircle {
background: #9e978e;
display: inline-block;
margin: 0 1em 1em 0;
}
.top,
.bottom {
height: 45px;
width: 90px;
}
.top {
border-top-left-radius: 90px ;
border-top-right-radius: 90px;
}
</style>
UPDATE:
Solution: In case anyone wants to know, refer to the sample by #bhv in the first comment for reference and tweak it as per your requirement.
first of all your posted code isn't of any help....still I'll try to give a procedure how you can achieve the linked image
create a div not with class .container
create 2 navs inside above created div
create a jumbotron below the navs inside the same div and contain it
in a div with class container
set margins as you need it between these 3 to bring them together
It is clearly visible that you dont need a semicircle..you need an ellipse use clip-path: ellipse(65px 30px at 125px 40px); someting like this to create it within same div then position it in a way you want to using css and give it highest z-index so that it renders as top-most layer.
prey that it works!! ;-)
you must use position:absolute to cover both jumbotron
add these lines of code to this class: .div-semicircle.
position: absolute;
top: 23%;
left: 40%;
I have been trying to add labels to the left of my FAB. I am liking the Material Design, but I am having an issue on getting the labels to appear properly. Any tips would be appreciated. Everything is displaying correctly except adding labels.
Here is a working example:
http://codepen.io/petja/pen/OVRYMq
HTML
<div class="backdrop"></div>
<div class="fab child" data-subitem="1">
<img alt="" src="images/smile.jpg">
</div>
<div class="fab child" data-subitem="2">
<img alt="" src="about/smile.jpg">
</div>
<div class="fab visible-xs float-phone" id="masterfab">
<i class="fa icon-phone soft-white"></i>
</div>
CSS
.fab {
background: #1C9E00;
border-radius: 50%;
text-align: center;
color: #FFF;
position: fixed;
right: 70px;
font-size: 25px;
padding: 9px 2.5px 6px;
-webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .42));
}
.fab span {
vertical-align: middle;
}
.fab.child {
width: 53.666667px;
height: 37.666667px;
display: none;
opacity: 0;
background: transparent;
border-radius: 0%;
right: 63px;
padding: 0;
}
.fab img {
border-radius: 50%;
}
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FAFAFA;
opacity: 0.7;
display: none;
}
JS
$(function(){
$(".fab,.backdrop").click(function(){
if($(".backdrop").is(":visible")){
$(".backdrop").fadeOut(125);
$(".fab.child")
.stop()
.animate({
bottom : $("#masterfab").css("bottom"),
opacity : 0
},125,function(){
$(this).hide();
});
}else{
$(".backdrop").fadeIn(125);
$(".fab.child").each(function(){
$(this)
.stop()
.show()
.animate({
bottom : (parseInt($("#masterfab").css("bottom")) + parseInt($("#masterfab").outerHeight()) + 70 * $(this).data("subitem") - $(".fab.child").outerHeight()) + "px",
opacity : 1
},125);
});
}
});
});
You want something like this?
There is .backdrop class in your css So, when I try to add materialize tooltipped it has same class name .backdrop which responsible to change background color of tooltip.
You added background: #ECECEC; in .backdrop So, tooltips had also same background color. So, I changed your .backdrop to .backdrop_gray and Now everything is fine.
HTML
<div class="backdrop_gray"></div>
<div class="tooltipped fab child" data-position="left" data-delay="50" data-tooltip="I am C" data-subitem="1"><span>C</span></div>
<div class="tooltipped fab child" data-position="left" data-delay="50" data-tooltip="I am B" data-subitem="2"><span>B</span></div>
<div class="tooltipped fab child" data-position="left" data-delay="50" data-tooltip="I am A" data-subitem="3"><span>A</span></div>
<div class="fab" id="masterfab"><span>+</span></div>
<h1>Floating Action Button</h1>
<p>(Hint: Button interacts with you)</p>
JS
$('.tooltipped').tooltip({delay: 50});
... // Your other JS.
Working Codepen
Check out this github issue
Github user philipraets created a nice codepen to demonstrate his soluton.
Edit (For the Lazy):
philipraets created a simple css style:
.mobile-fab-tip {
position: fixed;
right: 85px;
padding:0px 0.5rem;
text-align: right;
background-color: #323232;
border-radius: 2px;
color: #FFF;
width:auto;
}
then wrapped the tooltip within another link element using that style:
<div class="fixed-action-btn click-to-toggle" style="bottom:24px; right:24px;">
<a class="btn-floating btn-large red"><i class="large material-icons">settings</i></a>
<ul>
<li>
<i class="material-icons">create</i>
Edit <!--tooltip-->
</li>
<li>
<i class="material-icons">event</i>
Save to calendar <!--tooltip-->
</li>
<li>
<i class="material-icons">supervisor_account</i>
Switch responsible <!--tooltip-->
</li>
</ul>
</div>