What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Progress Bar widget - smaller bar

    Asked by igrzysk 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. 

    progress bar custom progress bar progress bar widget
  • Profile Image
    JotForm Support

    Answered by EltonCris 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

    Answered by grade4pagasa 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

    Answered by igrzysk on July 02, 2015 at 03:05 AM

    works gr8. Good job!

  • Profile Image
    JotForm Support

    Answered by EltonCris on July 02, 2015 at 06:50 AM

    Glad it helps you guys. Cheers! :)