Components: Can't set height and Width of spinner since beta.12

[argoo83]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Set width and height

What is the current behavior?

<mat-spinner style="width:40px; height: 40px" color="primary"> </mat-spinner>
has no effect since upgrade to beta.12

[argoo83]

mat-spinner.small-spinner svg { width: 40px !important; height: 40px !important; }

Used this css to solve this.

[karlos1337]

I try to set the container width/height, the mat-spinner width/height and the svg width/height, did not work. It works in previous versions only setting mat-spinner (md-spinner) widht/height.

https://stackblitz.com/edit/material2-spinner-issue?file=app%2Fapp.component.scss

[ghd8]

You can use the input parameter "diameter". (beta.12)

<mat-spinner [diameter]="40"></mat-spinner>

[nicktobolski]

What if one is looking for something more responsive? Is there anyway to quickly set it to behave as it did before (where it would automatically adjust to the parent container)?

[willshowell]

@nicktobolski you are probably limited to using !important

https://stackblitz.com/edit/material2-spinner-issue-vzdj9y?file=app/app.component.scss

[RobertDiPaolo]

I've just run into this as well after upgrading to beta12. IMHO the old behaviour was much better, I prefer to size components via CSS rather than input values. Seems a bit hacky to have to use !important.

[e-cloud]

@ghd8 's answer is the official way.

[mawo87]

Unfortunately setting the diameter doesn't solve the problem as the border won't change. For example, if you set the diameter to 16, the border thickness won't adapt and the spinner looks weird.

[karlos1337]

@mawo87 Can define the stroke width with [strokeWidth] input parameter https://material.angular.io/components/progress-spinner/api

[mawo87]

@karlos1337 Thanks for help - I somehow overlookd this.

[dgadelha]

@ghd8 diameter seems to add some padding or w.e.: https://plnkr.co/edit/9LVEpXy8XJAAWjYtVOBh?p=preview

[ghd8]

@dgadelha

<mat-spinner [diameter]="48"></mat-spinner>
instead of
<mat-spinner diameter="48"></mat-spinner>

[dgadelha]

My bad, thank you!

[stevenphaedonos]

If you set a low diameter (e.g. 20) you may end up with an undesirable progress-spinner, such as the one below. This can be resolved by also configuring the strokeWidth to a low number (e.g. 2).

[josephperrott]

Closing as the height is controlled via diameter

[MikaAK]

I'm still having this as an issues @josephperrott, I'm setting diameter and the px is still way to big. it ends up being a small circle for the spinner with a 100px width on mat-progress-spinner and svg even though the diameter is 20 and the circle is probably only 30px big

[darkedges]

Seems to be 10x on chrome.
https://stackblitz.com/edit/angular-material-progress-spinner

[willshowell]

@darkedges you need to bind to diameter with value binding, not string binding.

Coercion will be supported in https://github.com/angular/material2/pull/7791.

[darkedges]

@willshowell now I understand. Changed to

<mat-progress-spinner value="100" mode="determinate" [diameter]="68"></mat-progress-spinner>
<button mat-fab color="accent">
  <mat-icon class="icon">mic</mat-icon>
</button>

and the diameter value is being obeyed.

[EdmondChuiHW]

While diameter and strokeWidth works, I cannot find a way to set them globally. This was possible when CSS was respected, it there a workaround apart from using !important?

[mightypenguin]

I think the only issue left is that this isn't documented in the demo page for the spinner.

[eldhoabe]

Is this issue fixed. I still experience the same issue as suggested by @stevenphaedonos

<mat-progress-spinner mode="indeterminate" [diameter]="28"></mat-progress-spinner>

[hamidafghan]

Try to use diameter option.
70 is 70px size

[angular-automatic-lock-bot[bot]]

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._}