How to Remove Progress Bar?

  • Profile Image
    epr123
    Asked on October 01, 2017 at 03:22 AM

    I downloaded a template to design a new form. It has a progress bar at the top of the page, but I would like to replace it with the Progress Bar widget.

    I cannot figure out how to remove the progress bar. I see no widgets on the page. When I go into the advanced designer I can see it at the top but clicking on it has no response. I see no CSS code that can be edited. Any ideas?

  • Profile Image
    Nik_C
    Answered on October 01, 2017 at 03:42 AM

    That is actually a Progress bar widget, but I assume it is embedded in the template. 

    It can be removed by CSS, but if you add the same Progress bar widget again to the form, the added CSS will hide that one as well.

    Any particular reason why you need to remove the Progress bar and add it again?


  • Profile Image
    epr123
    Answered on October 01, 2017 at 04:06 AM

    I want to configure it to stay at the top of the page while scrolling. I suspected it may be a widget, but I can't see a widget anywhere on the form to be able to change the settings.

  • Profile Image
    Nik_C
    Answered on October 01, 2017 at 04:32 AM

    I understand. I created the below CSS that might work for you:

    #progressBar{

      position: fixed;

      width: 620px!important;

      top:10%;

      left:28%;

      z-index: 1;

    }

    #\37 2731254604149 > div > div > div:nth-child(2){

     position: fixed;

     z-index: 1;

    }

    Copy the above CSS in your Custom CSS Field.

    Here is my test form: https://form.jotformpro.com/72731718251960

    And the form in work:

    Please let us know if that could work for you.

    Thank you!

  • Profile Image
    epr123
    Answered on October 01, 2017 at 04:56 AM

    That works. Thanks!