seo Question posted in
Some basic information to get you started with this can be found here.

Dynamically change CSS style height – SEO

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.

Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    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!


  2. 0

    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?

    Login or Signup to reply.
  3. 0

    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}}%;">
    Login or Signup to reply.
  4. 0

    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%"

    Login or Signup to reply.
  5. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search