Hello, are you aware of a solution of how to make the progressbar sticky, i.e., to have it always visible even when you scroll down the page? I guess it should be possible with JS?
Thanks!
Best answer by duc_pham
View original
How to make progress bar stick to the top of the page
+3
I tried the following in the Custom CSS box in the "Look and Feel" tab.
.Skin #ProgressBar { position: -webkit-sticky; /* Safari */ position: sticky; top: 0;}
It worked for me at first, then for some reason, Qualtrics wiped it and when i tried it again, it didn't work. You may want to try this first, and let me know if it works?
UPDATE:
I changed the above code slightly, and now it worked:
.Skin div#ProgressBar { position: -webkit-sticky; /* Safari */ position: sticky; top: 0;}
The behavior seems inconsistent to me, but I might be wrong.
+3
Thanks, duc_pham!
I tried your updated version but for me it made the progress bar move to the bottom of the page, and it is not sticky:
Could it be that it depends on the Browser? I tested it in Firefox 80.0.1.
You are using theme "Flat" from the "Look and Feel" tab. In my instance I'm using theme "Classic". That might be the difference.
+3
Indeed, it works with the "Classic" theme for me, too.
Thanks duc_pham!
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.