Components: Progress-spinner is rendered 10x larger than expected

Created on 10 Nov 2017 · 2Comments · Source: angular/components

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The width and height of a mat-progress-spinner are equal to its diameter

What is the current behavior?

The width and height are 10 times its diameter

What are the steps to reproduce?

Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.

Plunker starter (using on @master): https://goo.gl/uDmqyY

StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV

<mat-progress-spinner mode="indeterminate" diameter="20"></mat-progress-spinner>

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material 5.0.0-rc0

Is there anything else we should know?

Root cause:
(in material2/src/lib/progress-spinner/progress-spinner.ts)
The @Input diameter is not passed through coerceNumberProperty() and hence recognized as a string. Later in ngOnChanges() this string would plus a number 0, which results in a 10 times larger size.

Source

isra-fel

👍1

Most helpful comment

Will be fixed by https://github.com/angular/material2/pull/7791. Until then you can work around it by setting the diameter via a data binding [diameter]="20".

crisbeto on 10 Nov 2017

👍3

All 2 comments

Will be fixed by https://github.com/angular/material2/pull/7791. Until then you can work around it by setting the diameter via a data binding [diameter]="20".

crisbeto on 10 Nov 2017

👍3

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}