Dynamically change CSS style height

Question

I am making users' leaderbord:

 <div class="user">
  <ul id="jogadores" *ngFor="let u of sortedUsers$; let i=index;" (click)="routeToUser(u.id)">
    <li class="user">
      <img class="gravatar" src="https://www.gravatar.com/avatar/{{u.imgUrl}}?d=https://www.1plusx.com/app/mu-plugins/all-in-one-seo-pack-pro/images/default-user-image.png" />
      <div class="progressBar">
        <span style="height: 100%;">
          <i></i>
          <b>{{sortedUsers$[i].points}}</b>

        </span>
      </div>
      <span class="username">
        <strong>{{sortedUsers$[i].username}}</strong>
      </span>
    </li>
  </ul>
</div>

Each <ul> element has some values which are coming from array. All evening I've been trying to change <span style="height: 100%;"> value to some value from {{sortedUsers$[i].points}} so each progress bar would change according to how many points user has. I tried passing value:

<span style="height: {{sortedUsers$[i].points}} %;">

also reaching it with jQuery, but also failed.

did `` work ? if not change the display to block or inline-block — Abslen Char, May 06 '18 at 18:00
Yes it works, but what I need is to change value 100 to whatever comes in the loop and this doesn't work. like for element[1] it has to be 80, for element[1] 20 and so on — user122222, May 06 '18 at 18:01
Have you already made span as a block or inline-block element ? — ashfaq.p, May 06 '18 at 18:03

ashfaq.p · Answer 1 · 2018-05-06T18:00:40.523

2

Height and width cannot be applied to span.

You can make it block element or inline-block and then it will accept your height and width.

Read more here: Does height and width not apply to span?

edited May 06 '18 at 18:00

answered May 06 '18 at 17:58

ashfaq.p

5,379
21
35

1

`inline-block` is more appropriate for spans (since are usually used as contextual wrapping inline elements) - whereas `div` are best suited for a *DIVisor* block element. – Roko C. Buljan May 06 '18 at 17:59
1

That can be decided as per the need but i have updated the answer to give more clearity:) – ashfaq.p May 06 '18 at 18:00

score 2 · Answer 2 · answered May 06 '18 at 18:05

2

I dont know if you noticed but you have a space between {{sortedUsers$[i].points}} and %; it should be like this with no space

<span style="height: {{sortedUsers$[i].points}}%;">

answered May 06 '18 at 18:05

Abslen Char

3,071
3
15
29

score 2 · Accepted Answer · answered May 06 '18 at 18:24

2

Check out ngStyle

Update an HTML element styles.

<span [ngStyle]="{'height': `${sortedUsers$[i].points}%`}"></span>

Your value would look like the following, where each number represent a percent: sortedUsers$[i].points = 100 // Percent

answered May 06 '18 at 18:24

Kyle Pfromer

1,485
1
15
26

score 1 · Answer 4 · answered May 06 '18 at 18:11

1

Use style attribute binding

<span [style.height]="sortedUsers$[i].points">
    <i></i>
   <b>{{sortedUsers$[i].points}}</b>
</span>

Where the value can be this sortedUsers$[i].points = "100%"

answered May 06 '18 at 18:11

John Velasquez

3,421
2
18
23

score 1 · Answer 5 · answered May 06 '18 at 19:47

1

Thank you all for your help! What worked for me was:

 <span class="user" [ngStyle]="{ 'height': getPoints(i)}">
          <i></i>
          <b>{{sortedUsers$[i].points}}</b>
  </span>

with:

getPoints(id) {
return this.sortedUsers$[id].points + '%';}

I am pretty sure some of yours would have worked either, but just letting you all know if someone gets similiar problem later! Such an easy thing got me stuck for hours! Thank you all!

answered May 06 '18 at 19:47

user122222

2,179
4
35
78

You could also use a template string for neater syntax, in my personal opinion: `getPoints(id) { return \`${this.sortedUsers$[id].points}%\`;}` – Kyle Pfromer May 06 '18 at 22:00

Dynamically change CSS style height

5 Answers5