Search code examples
jquerytablesorter

Fit progressbar to cell height

I am currently using Mottie's version of tablesorter to display some data. I wanted to add a column of progress bar, however the progress bar seems to be too tall and it affects the scroller widget of the tablesorter. It might be really simple but I couldn't figure out how to resize the progress bar to fit the height of the cell. Is there any clever way of doing it? I am currently just hard coding the size...

Table without progress bar displays correctly

Table with progress bar which affected the height of the row

$('.progressbar').height(10);

Also, does anyone know whether the column of progress bar will be sortable? Cheers!

Solution

  • In order for the progress bar to know how much of its parent container's space to take up, it needs to know how big the parent container is, so set its height in the CSS.

    table tbody td {
    white-space: nowrap;
    min-width: 60px;
    height: 20px;
}

    Then set the progress bar's height to 100%.

    $('.progressbar').height('100%');