How align text with Angular progress bar

Question

I would align a text with mat-progress-bar component.

<div>
  <span class="text">{{ element.progress }}</span>
  <span>
    <mat-progress-bar mode="determinate" [value]="element.progress"></mat-progress-bar>
  </span>
</div>

Even after using inline-block as CSS property progress bar stay under the texte.

How can I align the two elements in the same line without reducing mat-progress-bar width (keep it at 100% ) ?

Stackblitz

What is the result you want exactly? – Jayr Sep 17 '19 at 14:21 — Jayr, Sep 17 '19 at 14:21
Have text and progress bar on the same line – infodev Sep 17 '19 at 14:26 — infodev, Sep 17 '19 at 14:26

score 2 · Answer 1 · answered Sep 17 '19 at 14:30

2

take a look at my solution, hope it works for you.

/** No CSS for this example */
.text {
  display: inline-block;
  width: 40px;
}
mat-progress-bar {
  display: inline-block;
  width: calc(100% - 40px);
  margin-bottom: 4px;
}

answered Sep 17 '19 at 14:30

MilosMarkoni

171
8

score 1 · Answer 2 · answered Sep 17 '19 at 14:29

You need to use the solution from the How to overlay one div over another div and Vertically centering a div inside another div articles to achieve this behavior. These articles describe why you need them well.

<div class="container">
    <span class="text">{{ element.progress }}</span>
  <mat-progress-bar mode="determinate" [value]="element.progress"></mat-progress-bar>
</div>

.container {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

.text {
  position: absolute;
  z-index: 1;
}

mat-progress-bar {
  position: absolute;
}

Stackblitz.

Quentin · Accepted Answer · 2019-09-17T14:49:00.957

1

You can also use the flex-layout library:

<div fxLayout="row" fxLayoutGap="15px" fxLayoutAlign="start center" >
  <span class="text">{{ element.progress }}</span>
  <mat-progress-bar fxFlex mode="determinate" [value]="element.progress"></mat-progress-bar>
</div>

StackBlitz

Documentation: Demo & Info

edited Sep 17 '19 at 14:49

answered Sep 17 '19 at 14:34

Quentin

1,865
2
24
40

How align text with Angular progress bar

3 Answers3