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
    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! :)