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

I would like to make the survey progress bar shorter

  • 20 January 2021
  • 13 replies
  • 155 views

Badge +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

icon

Best answer by dbakiasi 16 February 2021, 06:00

View original

13 replies

Userlevel 7
Badge +22

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

Badge +2

It works!!!! Thank you rondev 😀

Userlevel 2
Badge +4

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

Userlevel 5
Badge +19

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😊!!!

Userlevel 2
Badge +4

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

Userlevel 7
Badge +35

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

Userlevel 2
Badge +4

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

Userlevel 7
Badge +35

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?

Userlevel 2
Badge +4

Deepak
image.pngthis :)

Userlevel 7
Badge +35

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

Userlevel 2
Badge +4

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?

Userlevel 7
Badge +35

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!

Userlevel 2
Badge +4

Thank you so much!

Leave a Reply