Progress Bar - Full Length / Move | XM Community
Skip to main content

Hi All

Hope you can help.

How would I make my progress bar like the blue line?

I would like to keep the same design but just move it up and make it full length.

Thanks for your help :)

@parkie_0007  You can try to use the below CSS in the Look & Feel in custom CSS. Can adjust the max-width based on your requirement. Use the padding bottom to try moving it a bit up.

 

.Skin #ProgressBar {


    max-width: 1000px;

 

     padding-bottom:40px;

}

Try using the HTML/Source view “<>” to update the survey’s Header with the below. It appends the Progress Bar to the last Question Body on the page and increases the width.

<script>

Qualtrics.SurveyEngine.addOnload(function()
{

var lastq = jQuery(".QuestionBody").last();
jQuery("#ProgressBar").detach().appendTo(lastq).css({"width":"100%", "margin-top":"0px", "padding-top":"20px"});

});

</script>

 

Try using the HTML/Source view “<>” to update the survey’s Header with the below. It appends the Progress Bar to the last Question Body on the page and increases the width.

<script>

Qualtrics.SurveyEngine.addOnload(function()
{

var lastq = jQuery(".QuestionBody").last();
jQuery("#ProgressBar").detach().appendTo(lastq).css({"width":"100%", "margin-top":"0px", "padding-top":"20px"});

});

</script>

 

Hi Tom

This worked well. How would I try moving the progress bar below the NEXT / BACK buttons and change the background colour of the progress bar?

Thanks :)

Sorry! And any idea how I could remove the progress bar on the 1st question page and last?

Thanks :)

Leave a Reply


Terms & Conditions