I would like to make the survey progress bar shorter | XM Community
Skip to main content
Solved

I would like to make the survey progress bar shorter

  • January 20, 2021
  • 13 replies
  • 326 views

Forum|alt.badge.img+2

Hello everyone. I am building a feedback button intercept. The exit survey button is overlaying the survey progress bar. I am thinking to make the progress bar shorter. Do you have any suggestions? Thanks
Screen Shot 2021-01-20 at 9.16.31 AM.png

Best answer by dbakiasi

It works!!!! Thank you rondev 😀

13 replies

rondev
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • Level 6 ●●●●●●
  • February 15, 2021

Use the below CSS:
#ProgressBar{
margin-right: 10%!important;
}


Forum|alt.badge.img+2
  • Author
  • Answer
  • February 16, 2021

It works!!!! Thank you rondev 😀


Forum|alt.badge.img+5
  • QPN Level 2 ●●
  • February 10, 2023

Hey, rondev how did you do that progress bar? I'm trying to modify it, but I can't!


qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • Level 5 ●●●●●
  • February 10, 2023

Hi cmagg ,
You can customize the size of progress bar by using below code in header file


You can change the width size as per your requirement by changing the percentage value.
Hope it resolves your query😊!!!


Forum|alt.badge.img+5
  • QPN Level 2 ●●
  • February 10, 2023

That's an input, but I would like to work on the height actually, to make it more visible.
I tried adding some code to your suggestion:

but nothing changed actually.
Any other idea? I tried also to work on the CSS editor, but nothing


Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • February 10, 2023

https://community.qualtrics.com/XMcommunity/discussion/comment/55286#Comment_55286cmagg You can use something like the below in custom CSS for height manipulation:
.Skin #ProgressBarFillContainer, .Skin .ProgressBarFill, .Skin .ProgressBarFillContainer { 
height: 50px !important;
}


Forum|alt.badge.img+5
  • QPN Level 2 ●●
  • February 10, 2023

Great! and how to allign it to the forward and back arrows?


Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • February 10, 2023

cmagg
By aligning you mean you need the width to be aligned with forward and next button or you need it on the footer of page.
Can you provide a visual?


Forum|alt.badge.img+5
  • QPN Level 2 ●●
  • February 10, 2023

Deepak
image.pngthis :)


Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • February 10, 2023

https://community.qualtrics.com/XMcommunity/discussion/comment/55302#Comment_55302Kindly use progress bar with verbose text. That should align it.
image.png


Forum|alt.badge.img+5
  • QPN Level 2 ●●
  • February 10, 2023

Yes, you are right!
But I don't want to display any text...do you know how could the arrow buttons could be called in CSS?


Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • February 10, 2023

cmagg
You can include a progress bar with text and hide the text. There could be a better way but this is one workaround.
.Skin #ProgressBar tr td:first-child, .Skin #ProgressBar tr td:first-child+td+td {
visibility: hidden;
}
Hope it helps!


Forum|alt.badge.img+5
  • QPN Level 2 ●●
  • February 20, 2023

Thank you so much!