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

Progress Bar - Full Length / Move

  • July 6, 2023
  • 4 replies
  • 256 views
P
Level 5 ●●●●●
Forum|alt.badge.img+5

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

Best answer by Tom_1842

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>

 

Naman_Savla
TusharDalwani

4 replies

Naman_Savla
QPN Level 4 ●●●●
Forum|alt.badge.img+9
  • Naman_Savla
  • QPN Level 4 ●●●●
  • July 6, 2023

@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;

}

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • Answer
  • July 6, 2023

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>

 

P
Level 5 ●●●●●
Forum|alt.badge.img+5
  • parkie_0007
  • Author
  • Level 5 ●●●●●
  • July 10, 2023

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

P
Level 5 ●●●●●
Forum|alt.badge.img+5
  • parkie_0007
  • Author
  • Level 5 ●●●●●
  • July 10, 2023

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

Thanks :)

Terms & ConditionsAccessibility statement