W3.css steht im Konflikt mit JQuery UI Progress Bar

Ich bin bei meinem letzten Strohhalm mit diesem. Ich kann das nicht herausfinden und es hat drei Tage gedauert, es zu versuchen. Ich benutze w3.css mit jQuery UI und jQuery UI.css.W3.css steht im Konflikt mit JQuery UI Progress Bar

PROBLEM: Die Fortschrittsbalken erscheinen, füllen sich aber nicht. Wenn Sie die href zu w3.css entfernen, funktionieren die Fortschrittsbalken einwandfrei. Aber sonst kommt die Füllung nicht vor.

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

$(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); 
    }); 
    } 
});

Quelle

2017-03-23 helpkelp

Versuchen Sie es mit:

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

w3.css ergänzt:

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

, die mit Code verunstaltet.

JSfiddle

Quelle

2017-03-23 19:20:46

Heilige Scheiße Ich liebe dich. Das hat es getan. Ich danke dir sehr! Ich werde dieses Wissen an alle weitergeben. – helpkelp

Danke! Könnten Sie auch Kommentare entfernen, die für zukünftige Zuschauer nicht hilfreich sind? Es hält nur die Seite sauberer :) Danke nochmal! –

W3.css steht im Konflikt mit JQuery UI Progress Bar

Antwort

Verwandte Themen