Progress Bar widget - smaller bar

  • Profile Image
    igrzysk
    Asked on July 01, 2015 at 04:39 PM

    Hello,

    I'd like to use the widget on my form, however, it just doesn't look right there. It is to big and it overlaps the rounded corners.

    Could you provide me with some CSS that would allow it to be smaller (something like the red box below)

     

    http://monosnap.com/image/4kpTXmA5IUAcGEgTBIR2deJ3jQksJW

    I would also like to have the in the middle of the page not the left side and maybe above the bar, not beyond. 

  • Profile Image
    EltonCris
    Answered on July 01, 2015 at 10:51 PM

    Use this CSS codes and inject this to your form. https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form

    .progressjs-progress.progressjs-theme-islandBlue {

      width: 100% !important;

    }

    .progressBarContainer {

      position: relative !important;

      top: 30px !important;

    }

    .progressBarContainer > div {

      width: 90% !important;

    }

    Result:

     

     

  • Profile Image
    grade4pagasa
    Answered on July 02, 2015 at 01:50 AM

    been looking for a fix on this issue. thanks, EltonCris!

    fyi: i noticed that the progress bar is still rendered as 100% wide on my laptop (chrome) & iPad (chrome & safari) - this even after if i changed the width to 50% on the properties page of the progress bar widget. but the 50% width is rendered perfectly in my android phone & android tablet.

    will apply the css fix from now on.

    again, thanks for the help!

  • Profile Image
    igrzysk
    Answered on July 02, 2015 at 03:05 AM

    works gr8. Good job!

  • Profile Image
    EltonCris
    Answered on July 02, 2015 at 06:50 AM

    Glad it helps you guys. Cheers! :)