Grid repeater with html script

Hello!

Thanks for contacting us

You can use a combination of HTML and CSS code to create a grid repeater with a line representing a different task completion percentage in each block. Here's an example of how you can do it:

First, insert the HTML element for your grid repeater. You can use a div element with a class of "grid-container" to contain all your blocks. Within this container, create a div element with a class of "grid-item" for each block. Here's an example:

<div class="grid-container">
  <div class="grid-item">
    <div class="progress-bar" style="width: 50%"></div>
  </div>
  <div class="grid-item">
    <div class="progress-bar" style="width: 75%"></div>
  </div>
  <div class="grid-item">
    <div class="progress-bar" style="width: 25%"></div>
  </div>
</div>

Next, create the CSS code for your progress bar. You can use the ".progress-bar" class to style the bar and the ".grid-item" class to style each block. Here's an example:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  border: 1px solid #ccc;
  padding: 10px;
}

.progress-bar {
  height: 20px;
  background-color: #4CAF50;
}

Finally, you can customize the width of each progress bar by adjusting the "width" property in the "style" attribute of each ".progress-bar" element.
I hope this helps you create the grid repeater with the customizable progress bar you want!

Let us know if you have any further questions.

...................................................
Sincerely,
Ahmad.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Last edited 15 May 2023 by Support Team

Thank you very much. I have tested you script but it doesn't solve the issue. May be something isn't clear to me.

My problem is not the progress bar itself. I'm using one I love: https://www.w3schools.com/w3css/w3css_progressbar.asp

Let's say that I have a grid repeater with 10 grid container (one per row) and I need to set the progress bar with a different value in each one. Once I put the html into the first grid container of the grid repeater, the value is copied in all the 10 rows, and that's ok. But If I set a new value for the progress bar - for instance - in the second container, all the other bars change with the same value.

Instead I need to set a different value for each grid container. Could you please help me?

Hi,

Instead I need to set a different value for each grid container. Could you please help me?

Then you should use a regular Grid >> Columns are different

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp