I've been working on incorporating labels to the left of my FAB, following the Material Design principles. Despite my efforts, I'm facing difficulties in getting the labels to display properly. I would greatly appreciate any advice or tips on how to resolve this issue. Everything else seems to be showing up correctly, except for the labels.
Here's a functional example: http://codepen.io/petja/pen/OVRYMq
HTML
<div class="backdrop"></div>
<div class="fab child" data-subitem="1">
<a href="tel:+121212121"><img alt="" src="images/smile.jpg"></a>
</div>
<div class="fab child" data-subitem="2">
<a href="tel:+1212121212"><img alt="" src="about/smile.jpg"></a>
</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);
});
}
});
});