Is it possible to change the height on jquery ui progressbar

Question

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

Is it possible to specify the height of the jQuery runtime?

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

Answer 1

Of course. There's even a variable version of a demonstration of progress .

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

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

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

Answer 2

you can also use this function that works for all css attributes

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

Answer 3

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

 jquery-ui-1.8.17.custom.css 

Scroll down (~ line 564) and you will see the following CSS attribute:

 .ui-progressbar (...); 

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