Adjust CSS style height dynamically

Question

Adjust CSS style height dynamically

I am currently creating a leaderboard for users:

 <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 is populated with values from an array. I have been attempting to adjust the progress bar based on the user's points by changing the

<span style="height: 100%;">

value to {{sortedUsers$[i].points}}. I even tried changing it to:

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

and also using jQuery, but so far both attempts have been unsuccessful.

jquery html css angular

Answer 1

Answer №1

Take a look at React DOM Elements

Modify the styles of an HTML element using React.

<div style={{ height: `${userList[i].progress}%` }}></div>

Your code should resemble the example above, where the percentage value is represented by

userList[i].progress = 75 // Progress Percentage

Answer 2

Take a look at React DOM Elements

Modify the styles of an HTML element using React.

<div style={{ height: `${userList[i].progress}%` }}></div>

Your code should resemble the example above, where the percentage value is represented by

userList[i].progress = 75 // Progress Percentage

Answer 3

Answer №2

Applying height and width to span is not possible.

To make it accept height and width, consider making it a block element or inline-block.

For more details, check out: Does height and width not apply to span?

Answer 4

Applying height and width to span is not possible.

To make it accept height and width, consider making it a block element or inline-block.

For more details, check out: Does height and width not apply to span?

Answer 5

Answer №3

Perhaps you have noticed that there is a space between {{sortedUsers$[i].points}} and %;. The correct format should have no space between them.

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

Answer 6

Perhaps you have noticed that there is a space between {{sortedUsers$[i].points}} and %;. The correct format should have no space between them.

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

Answer 7

Answer №4

Utilize the style attribute binding

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

Here, the value could be sortedUsers$[i].points = "100%"

Answer 8

Utilize the style attribute binding

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

Here, the value could be sortedUsers$[i].points = "100%"

Answer 9

Answer №5

Big thanks to everyone for your assistance! The solution that finally worked for me was:

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

utilizing the following function:

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

I'm sure some of the other suggestions would have worked too, but I wanted to share what worked for me in case someone else encounters a similar issue in the future. It's amazing how a seemingly simple thing can cause so much trouble! Thanks again to everyone who pitched in!

Answer 10

Big thanks to everyone for your assistance! The solution that finally worked for me was:

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

utilizing the following function:

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

I'm sure some of the other suggestions would have worked too, but I wanted to share what worked for me in case someone else encounters a similar issue in the future. It's amazing how a seemingly simple thing can cause so much trouble! Thanks again to everyone who pitched in!

Adjust CSS style height dynamically

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Cross Browser Compatibility for CSS Page Scrolling to the Right and Handling White Space/Margins

Adjusting the height of an Angular CDK virtual scroll viewport based on dynamic needs

Communication between parents and children is crucial for building strong relationships and providing validation

Create a visual representation of an item within a framework using an Angular directive

Internet Explorer experiencing difficulties displaying elements

Querying Parse Server for objectId information

What is the ideal framerate for smooth animation?

Right-align the text in the title of the material card

Generate a JSON object specifically for the modified input fields upon submitting the form

Prevent a form from loading depending on the response received from an ajax callback

Vue multi-page application encounters compilation errors when attempting to include CSS within the <style> elements

When using ngStyle to bind a variable, the binding variable will be null

Toggle the visibility of a component by clicking on a specific title within a table, dependent on the column title in Angular 9

What are the steps to resolve issues with my dropdown menu in IE9?

Deactivate the form element when a user selects another button

Div element failing to scroll with excessive content

Change elements in real-time

Vue's v-model functionality encounters issues when navigating back and forth in the browsing history

What is the best way to achieve a partial match using JQuery?

"Bordering with Rounded Edges: A CSS Styling