0

I am at my last straw with this one. I cannot figure this out and it has been three days now of trying. I am using w3.css with jQuery UI and jQuery UI.css.

ISSUE: The progress bars appear but don't fill. When you remove the href to w3.css, the progress bars work just fine. But otherwise, the fill doesn't occur.

FIDDLE: http://jsfiddle.net/kjg95pxq/7/

HTML 

<body class="w3-content" style="max-width:1300px">

  <!-- ROW 3.1: Skillsets Section -->
  <div class="w3-container">

    <div class="progressbar w3-center" id="progressbar" data-value="50">
      <p style="position:absolute">20%</p>
    </div>
  </div>

  <div class="w3-row" id="rowWaypoint2">
    <div class="capsuleBox3 animated" id="capBox3">
      <div class="w3-half w3-dark-grey w3-container w3-center" id="contact" style="height:700px">
        <div style="padding-top:55px">
          <h1>Skillsets</h1>
          <p>My current skill progressions</p>
        </div>

        <!-- Progress Bar for JavaScript/jQuery -->

        <div style="padding-top:18px">
          <p> Tacos </p>
        </div>

        <div style="padding-top:0px">
          <div class="progressbar w3-center" data-value="40">
            <p style="position:absolute">20%</p>

          </div>
        </div>

        <div class="progressbar w3-center" id="progressbar" data-value="80">
          <p style="position:absolute">20%</p>
        </div>

        <div class="progressbar w3-center" data-value="20">
          <p style="position:absolute">20%</p>
        </div>

      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

</body>

CSS

.progressbar {
  width: 80%;
  margin: 20px auto;
}

.ui-progressbar-value {
  transition: width 0.5s;
  -webkit-transition: width 2s;
}

JS

$(document).ready(function() {
  pbRun();
  function pbRun() {
    $(".progressbar").progressbar();
    //this initializes the widget
    $(".progressbar").each(function() {
      var valPB = parseInt($(this).data('value'));
      var percentPB = valPB;
      $(this).progressbar("option", "value", percentPB);
    });
  }
});
helpkelp
  • 31
  • 2
  • 8

1 Answers1

4

Try using:

.ui-progressbar .ui-progressbar-value {
  box-sizing: content-box;
}

w3.css adds:

*, *:before, *:after {
  box-sizing: inherit;
}

which messes with code.

JSfiddle

Chris Happy
  • 7,088
  • 2
  • 22
  • 49
  • Holy shit I love you. That did it. Thank you so much! I will carry on this knowledge to everyone. – helpkelp Mar 23 '17 at 19:22
  • Thanks! Also, could you remove any comments that won't be helpful to future viewers? It just keeps the site more clean :) Thanks again! – Chris Happy Mar 23 '17 at 19:28