Progress bar rendering issue

Form components
1

For some reason when I use the progress bar the percentage on the right of the bar is being combined with a constant “0%”. See this screenshot. Here the value is 82% but there’s also a 0% overlapping.

progress1

So I looked in the developer console and I saw that there were two spans, with the “mbsc-progress-value” class. In this screenshot you can see that there’s one at 79% and the other still at 0%.

progress2

Why would this be happening?

Here’s my HTML

<div id=previewvideoprompt class='mbsc-cloak'>
<div class='mbsc-align-center'>
<label class='mbsc-progress-primary'>Uploading video...<progress id=video-progress mbsc-progress max='100' data-val='right'></progress></label>
</div>
</div>

And here is my javascript.

function videoUploadProgress(e) { // upload process in progress
  if (e.lengthComputable) {
      var iPercentComplete = Math.round(e.loaded * 100 / e.total);

      var inst = $('#video-progress').mobiscroll4('getInst');
      inst.setVal(iPercentComplete);

  } else {
      //document.getElementById('video-progresslabel').innerHTML = 'Unable to compute';
  }
}
2

Hi Vincent,

I just tested this problem, and it looks like this is bug in the Progress component. At re-initialization the mbsc-progress-value container doesn’t get cleaned up. (At every popup show the from components will auto-initialize inside the popup container)

As a workaround I can advise you to use the use the js initialization form:

$('#video-progress').mobiscroll4().progress();

instead of the mbsc-progress attribute. If the mbsc-progress attribute isn’t available on the element the auto initialization won’t affect the progress and it will be initialized once.

Please let me know if this works for you!

1 Like
3

Thank you! That works.