0

I'm trying to show a fontawsome icon to come on top of a materialize css progress/determinate div. But with no luck. the icon shows but not completely part of it is clipped/hidden. I have tried a lot of solution but no help.

.progress .determinate {
  overflow: visible;
  z-index: 1;
}
.progress .determinate .fa {
  position: absolute;
  top: -5px;
  font-size: 12px;
  right: 0px;
  visibility: visible;
  z-index: 9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"></script>

<div class="col l9 m9 s9 ">
  <div class="col l12 m12 s12">
    <div class="progress">
      <div class="determinate" style="width:70%">
        <i class="fa fa-circle"></i>
      </div>
    </div>
  </div>
</div>

Below is the image showing what it should look like. But i m not able to figure out how to achieve this even after hours of struggling. In the image the circle is the fa-circle icon

In the image the circle is the <code>fa-circle</code> icon

Below are some of the posts i have tried

  1. First
  2. Second
  3. Third

Tried several other things but could make it work. Any help will be appreciated. Thanks in advance.

Community
  • 1
  • 1
Manish
  • 4,692
  • 3
  • 29
  • 41

3 Answers3

2

Your .progress overflow is hidden, so make it visible 

.progress {

     overflow: visible;

     }
Arun
  • 1,609
  • 1
  • 15
  • 18
2

Here is the solution

http://codepen.io/Bhupinderkumar/pen/dOLOPJ check here i created with codepen and got the solution or you just need to add this

.progress{ overflow:inherit!important }
Bhupinder kumar
  • 558
  • 1
  • 5
  • 19
1

Your .progress overflow is hidden, so make it visible by adding code as below,

.progress{
  overflow:visible !important;
}

!important - by adding !important to your CSS overflow property, you are telling to unseen other important rules and apply this first. 

.progress{
  overflow:visible !important;
}
.progress .determinate {
  width:70%;
}
.progress .determinate .fa {
  position:absolute;
  top:-5px;
  right:0;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div class="col l9 m9 s9 ">
  <div class="col l12 m12 s12">
    <div class="progress">
      <div class="determinate">
        <i class="fa fa-circle"></i>
      </div>
    </div>
  </div>
</div>
frnt
  • 8,455
  • 2
  • 22
  • 25