Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

circular-progress does not play well with ng-shown and / or ng-if (IE11) #387

Closed
cristiano-belloni opened this issue Oct 7, 2014 · 7 comments
Assignees
Milestone

Comments

@cristiano-belloni
Copy link

I'm trying to show a circular progress indicator only when needed, but it seems to show only a white circle if using ng-show on the element:

This does not work, shows only a white circle (instead of the progress indicator) when the ng-show condition is true:

<material-circular-progress diameter="64" style="margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;" mode="determinate" ng-value="progress.getProgressPercentage()" ng-show="progress.getProgressVisibility()"></material-circular-progress>

This does work, alway shows the circular progress correctly:

<material-circular-progress diameter="64" style="margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;" mode="determinate" ng-value="progress.getProgressPercentage()" ng-show="true || progress.getProgressVisibility()"></material-circular-progress>

Also, the same thing on a linear progress indicator works both ways.

@cristiano-belloni
Copy link
Author

And finally, this looks awkward but works perfectly (removing ng-show):

ng-style="{opacity : ((progress.getProgressVisibility()) && '1') || '0'}"

@EisenbergEffect
Copy link
Contributor

I wonder if it's the animation system conflicting with the circular-progress css? What happens if you manually bind the display style and toggle it?

@ajoslin Any ideas on this. Any changes in ngShow/ngIf in 1.3 that could be related? or do you think this could be a conflict with the animation system?

@cristiano-belloni
Copy link
Author

@EisenbergEffect

ng-style="{display : ((progress.getProgressVisibility()) && 'block') || 'none'}"

is working. It seems related to ng-show itself.

@cristiano-belloni
Copy link
Author

(also, is the solid white circle inside a bug? I expected the inner circle to be transparent)

@robertmesserle
Copy link
Contributor

This does not seem like it is still an issue:

http://codepen.io/robertmesserle/pen/219ced023f77dd43b22bc5220d4dc093

@amedeomar
Copy link

I tried
http://codepen.io/robertmesserle/pen/219ced023f77dd43b22bc5220d4dc093
on IE 11 but if you hide and show again the spinners you will see that the indeterminate animation become different!!

@robertmesserle
Copy link
Contributor

Re-opening and tagging as IE11 bug.

@robertmesserle robertmesserle changed the title circular-progress does not play well with ng-shown and / or ng-if circular-progress does not play well with ng-shown and / or ng-if (IE11) Feb 12, 2015
@robertmesserle robertmesserle modified the milestones: 0.9.0, 0.7.0 Feb 12, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

5 participants