[mdc-linear-progress] Incorrect behavior without text-align: left

[101arrowz]

Bug report

The linear progress component renders incorrectly with text-align: center or text-align: right. This applies for all forms of the linear progress component.

Steps to reproduce

Set text-align: center on any ancestor of the linear progress component.

Actual behavior

For text-align: center, the colored part of the progress bar moves to the center (and for reversed, half is no longer within the component and is no longer visible). For text-align: right, the colored part of the progress bar is moved such that its edge is on the right (and for reversed, it's gone).

Expected behavior

The component should behave normally with any text-align for its ancestors.

Your Environment:

Software	Version(s)
MDC Web	latest
Browser	Chrome 80, EdgeHTML 18
Operating System	Windows

Additional context

This is probably going to happen for every browser, operating system, and version of MDC. There's a simple fix, though.

Possible solution

Add text-align: left to the CSS here. I don't have a good understanding of Sass/SCSS, so I'm not sure if this is exactly the place to add the line in, but essentially any element with the mdc-linear-progress class should have text-align: left applied.

[jonboj]

Environment MDC version 13.0.0, Ubuntu 21.10, Chrome 97.

Setup according to mdc-linear-progress.

Then set progress to e.g. 0.3. Here got the primary bar centered with dots streaming both left and right to primary bar. Tried with alignments and other layout adjustments, but found no solution. Then set buffer to 0.5, this put a grayed bar aligned left to the primary bar instead of the streaming dots, actually resulting in a nice progress bar. Attached is screen capture.

  Think mdc-linear-progress is designed to be similar on all device types with primary bar centered. To me a good approach, but how size of buffer affected the total layout was found ad hoc.

[jorgenfb]

We have also experienced this issue.