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"))
    });

Matt Ball · Accepted Answer · 2011-06-01T22:45:46.763

12

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/

edited Jun 01 '11 at 22:45

answered Jun 01 '11 at 22:40

Matt Ball

354,903
100
647
710

1

i don't want my users to change the size. i want to specific the height programatically. i don't see this option – leora Jun 01 '11 at 22:41
then just use height - that's the programmatic option – Dan Feb 23 '12 at 15:06
Not working for me. The jsfiddle demo gives empty result. Also on my webpage the progress right bottom is cut – g.pickardou Nov 09 '15 at 18:30
@g.pickardou apologies, a link rotted. Fixed. – Matt Ball Nov 09 '15 at 19:08

MirzaShakir · Answer 2 · 2013-11-19T11:31:02.447

2

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

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

edited Nov 19 '13 at 11:31

answered Apr 25 '13 at 07:05

MirzaShakir

409
3
7

score 1 · Answer 3 · answered Feb 22 '12 at 22:54

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.

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

3 Answers3