Is it possible to change the height on a jquery ui progressbar

Question

I have a progress bar in a html table cell. It seems to expand to the width of the table cell but i want to explicitly specify the height of the progress bar.

Is it possible to specify the height of a jQuery progress bar?

    $(this).progressbar({
        value: parseInt($(this).attr("rel"))
    });

Answer 1

Of course it is. There's even a resizable progress bar demo.

Too fancy for you? Just use .height():

$('#progressbar').height(400);

Demo: http://jsfiddle.net/mattball/N5AVv/

Answer 2

you can also use this function which works for all css attribures

$("#progressbar" ).css( "maxWidth", "200%" );

Answer 3

You will need to edit the jQuery UI CSS file. It will look something like

jquery-ui-1.8.17.custom.css

Scroll to the bottom (~line 564) and your will see the following CSS attribute:

.ui-progressbar (...);

change the HEIGHT attribute value to whatever you want, save the file and upload it to your server. Refresh your browser and you have your customized progress bar.