W3.css与JQuery UI进度栏冲突

Question

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. 我将w3.css与jQuery UI和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. 当您将href删除到w3.css时，进度条可以正常工作。 But otherwise, the fill doesn't occur. 但是否则，填充不会发生。

FIDDLE: http://jsfiddle.net/kjg95pxq/7/ 内容： http : //jsfiddle.net/kjg95pxq/7/

HTML 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 CSS

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

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

JS 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);
    });
  }
});

Answer 1

Try using: 尝试使用：

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

w3.css adds: w3.css添加：

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

which messes with code. 弄乱了代码。

JSfiddle 的jsfiddle

W3.css与JQuery UI进度栏冲突

问题描述

1 个解决方案

解决方案1
4 已采纳 2017-03-23 19:20:46

W3.css与JQuery UI进度栏冲突

问题描述

1 个解决方案

解决方案1 4 已采纳 2017-03-23 19:20:46

解决方案1
4 已采纳 2017-03-23 19:20:46