Web Connection
Progressbar into a Grid
Gravatar is a globally recognized avatar based on your email address. Progressbar into a Grid
  Luca
  All
  Apr 24, 2021 @ 09:48am

Dear Rick,
please is there any way to obtain this result into a grid?
I need to use one column like a progressbar and to use the color to indicate the percentage.
(What I show is an example created with Photoshop).
Thank you very much for support

Gravatar is a globally recognized avatar based on your email address. re: Progressbar into a Grid
  Rick Strahl
  Luca
  Apr 24, 2021 @ 05:01pm

Yes...

You can use stacked elements with position:relative. Basically you'd add a style="position:relative"> to <td> then add two <div> with absolute positioning with a z-order. The background you stretch out across the cell and then set the width: XX% to get the background 'bar'.

I really shouldn't be doing this for you, but here you go:

<html>
    <head>
        <style>
            td { border: 1px solid; padding: 5px }
            td:first-child { min-width: 150px; }

            td.percent-cell {
                position:relative;height: 40px;width: 100%;
            }
            td.percent-cell div:first-child {
                position: absolute; z-index: 1; left: 0; top: 0; right: 0; height: 100%; background: lightsteelblue
            }
            td.percent-cell div:nth-child(2) {
                position: absolute; z-index: 2; left: 0; top: 0; right: 0; background: transparent;width: 100%; padding: 5px;
            }
        </style>
    </head>
<body>
<h1>Hello World</h1>


<table style="width: 100%">
    <tbody>
    <tr>
        <td>
            Label
        </td>
        <td  class="percent-cell">            
            <!-- background -->
            <div style="width: 80%">   <!-- percentage should work here for the bar width -->
            </div>
            
            <div>This can be some long text that wraps</div>                            
        </td>       
    </tr>
    <tr>
        <td>
            Label
        </td>
        <td class="percent-cell" >            
            <!-- background -->
            <div style="width: 55%;">   <!-- percentage should work here for the bar width -->
            </div>            
            <div>This can be some long text that wraps</div>                            
        </td>       
    </tr>
</tbody>
</table>
</body>
</html>

Looks like this:

The one problem with this is that the height of the control has to be some fixed height or it doesn't work reliably. So you have to make sure your content fits consistently and you may also have to tweak the padding and placement.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Progressbar into a Grid
  Luca
  Rick Strahl
  Apr 24, 2021 @ 11:40pm

Fantastic!!
I know WC is limitless.
Thank you again, Rick.

© 1996-2021