Change <md-progress-linear> height

Question

I'm failing to overwrite the css for <md-progress-linear>.

They have the following code to set the heightof the progress bar in their sass file:

$progress-linear-bar-height: 5px !default;

md-progress-linear {
  height: $progress-linear-bar-height;
}

Even when I change 5pxto 1px it still doesn't change. Leaving out the height, doesn't change anything either.

Even when I put it in my own sass file, it doesn't overwrite it:

md-progress-linear {
  height: 2px !important;
}

Am I overlooking something here?

$progress-linear-bar-height: 1px !default;

md-progress-linear {
  display: block;
  position: relative;
  width: 100%;
  height: $progress-linear-bar-height;

  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

 <md-progress-linear md-mode="indeterminate" ng-if="showLoader"></md-progress-linear>

Tashinatashkent

This is Angular Material? Can I get the full syntax please. – Strategist

I did some google search and all the same. Most doable suggestion was to edit the main CSS file of angularmaterial and edit <md-progress-linear> this tag's primitive css on basis of what you want at place of making a work around. – Strategist

Answer 1

In Angular 15. This works for me:

:host ::ng-deep mat-progress-bar {
  height: 10px;
}

:host ::ng-deep mat-progress-bar .mdc-linear-progress__bar-inner {
  border-top-width: 10px;
}

Aholla

You saved my afternoon :) mat-progress-bar { height: var(--height); } mat-progress-bar .mdc-linear-progress__bar-inner { border-top-width: var(--height); } with encapsulation: ViewEncapsulation.None for those who wants to get ride of the deprecated ng-deep – Shelf

Answer 2

.mat-mdc-progress-bar {
    --mdc-linear-progress-track-height: 24px;
    --mdc-linear-progress-active-indicator-height: 24px;
}

this is what works for "@angular/material": "16.1.1"

Rifleman

Answer 3

The following should work. First we set the height of the progress-bar container and then the linear bar, both to 20px. These two elements together help increase the height of linear progress bar.

md-progress-linear .md-container {
    height: 20px;
}

md-progress-linear .md-container .md-bar {
    height: 20px;
}

Hals

Can you add some explanation of why it works? It would make for better answer for future readers. – Soursop

Answer 4

As the height is set on more than one element:

md-progress-linear {
  height: $progress-linear-bar-height;

  .md-container {
    height: $progress-linear-bar-height;

    .md-bar {
      height: $progress-linear-bar-height;
    }

    .md-dashed:before {
      height: $progress-linear-bar-height;
    }
}

You either overwrite all of these or do it like I did it:

File variables_material.scss:

$progress-linear-bar-height: 3px;

File main.scss:

@import "variables_material";
@import "vendor/angular-material/angular-material.scss"; 

@import …

This will configure the height of the progressbar to 3px;

Hampshire

Answer 5

You can use scaleY on md-progress-linear element.

transform: scaleY(2); transform-origin: bottom;

Reproachful

Answer 6

In Angular Material 15 the CSS variable --mdc-linear-progress-track-height is referenced internally to set the height of the progress bar. The developers leave it unset and fallback to a value of 4px but you can set it. As a caution, the variable seems undocumented and they may consider it an internal implementation detail. Depend on it at your own risk.

In my situation, a component that includes a progress bar, I set this variable on the host and was able to resize it.

:host {
  --mdc-linear-progress-track-height: 12px;
}

Catamnesis

Please can you provide a bit more detail of how to implement? – Cris

Answer 7

None of these answers worked for me. This works for me:

:host {
  --mdc-linear-progress-track-height: 16px;
  --mdc-linear-progress-active-indicator-height: 16px;
}

This is because the new mdc linear progress height is calculated with:

height: max(var(---mdc-linear-progress-track-height),
    var(---mdc-linear-progress-active-indicator-height));
}

I had to set both track height and indicator height.

It's not tested for states other than static progress.

Fourflush

Answer 8

In Angular 10. This works for me:

.mat-progress-bar-element {
  height: 50px !important;
}

.mat-progress-bar {
  height: 50px !important;
}

Whither