Clever Geek Handbook

Material construct lite Undefined progress bar does not apply full width to it

I am using undefined loading on one of our content pages. The problem is it doesn't apply the full length to it.

I am using a div with class "mdl-grid" and inside that I am using another div with class "mdl-cell mdl-cell-12-col". in this inner div I am actually using the progress bar div.

I am using the following HTML code:

<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
</div>

Output: using-12Col-div

As you can see it does not take up the entire length of the div, i.e. 100% So I tried with two 6 column grids and tried to add a progress bar component to the ones that are similar,

<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>

But still it takes the same width.

The codepen for the same can be found here .

Any help on using the inderminate progress bar to assign full length to it would be much appreciated.

+3


source to share


1 answer


This is because you are providing a full width container, not the progress itself. Animations need a certain width in a way to work consistently. We chose a hard width of 3 or 500 pixels against .mdl-progress

.



Here's the code that works the way you want. Easy to understand CSS Animations can become unstable with width inheritance like percentages.

+3


source






More articles:


All Articles