bug(mat-progress-bar): Progress Bar alignment issues with text-align css.

[brian-weasner]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Legacy mat-progress-bar

Description

Determinate progress bar is not left aligned if parent component has text-align set to center or right.

Reproduction

StackBlitz link: https://stackblitz.com/edit/ci17fy?file=src%2Fexample%2Fprogress-bar-determinate-example.html

Steps to reproduce:

1. Wrap determinate progress bar with style of text-align: center; or text-align: right;

Expected Behavior

Not expecting text-align css to change position of where the filled in portion of the progress bar starts.

Actual Behavior

Setting text-align css to center or right changes the position of where the filled in portion of the progress bar starts.

Environment

• Angular: 16.1.1
• CDK/Material: 16.1.7
• Browser(s): Chrome, Firefox (Probably Safari Too)
• Operating System: Windows (Probably all)

[brian-weasner]

To fix this:

Add the following to root stylesheet:

mat-progress-bar {
  text-align: left;
}

[brian-weasner]

Similar Issue with Indeterminate Progress Bar

Stackblitz link: https://stackblitz.com/edit/c9esjd?file=src%2Fexample%2Fprogress-bar-indeterminate-example.html

[angular-automatic-lock-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.}