Hello friendly community! I have a long PGR question which requires some scrolling, however on a cellphone the question body is a bit tight and the scrollbar is hard to manage. Therefore two questions:
Is there a way to force the scrollbar to be visible. The code that I have works well in the preview mode on Chrome or Safari, but with Android or Apple phones, the scrollbar is super difficult.
Or 2. Is there a way to reduce the responsive width (perhaps to 90%) of the question text/body for a particular question?
Thank you so much!
Jess
Page 1 / 1
Hi there, this was an adventure to investigate, but I was able to find a custom scroll bar implementation that is able to display on both iPhone and android mobile devices. iPhones have not supported custom scroll bars since ios14 so it needs to be created with JS. I tried a bunch of different JS libraries, but the one that I was able to actually get to work decently is a jQuery plugin called SlimScroll. Honorable mention to LetMeScroll which looked and scrolled nice but I was having trouble clicking on the actual survey questions. If anyone else that stumbles on this has a smoother implementation for iPhones within Qualtrics, I would be interested to hear. To implement SlimScroll in Qualtrics, first head over to the survey's Look & Feel and add the below to the survey's Header:
Then, in the Style section, add the below CSS, customizing as needed .scrollable { margin: 0 auto; overflow: hidden; padding-right: 15px; }
.slimScrollBar { display: block !important; width: 15px !important; background-color: red !important; } Next, head over to the survey builder and create a survey question that would require scrolling. I used a Multiple Choice question with 20 options in my example. Finally, replace the question's JavaSctipt with the below. I grabbed code from this codepen and added pieces for height and for destroying the custom scrollbar on page submit so it doesn't carry to the following page. Qualtrics.SurveyEngine.addOnload(function() { /*Place your JavaScript here to run when the page loads*/
Qualtrics.SurveyEngine.addOnReady(function() { /*Place your JavaScript here to run when the page is fully displayed*/
var availheight = jQuery(window).height(); var height = availheight - 1; var scrollable = jQuery('.scrollable');
// Keeping the Scrollable state separate var state = { pos: { lowest: 0, current: 0 }, offset: { top: o0, 0], //Old Offset, New Offset } } // scrollable.slimScroll({ height: height, width: '100%', start: 'top' }); // scrollable.slimScroll().bind('slimscrolling', function (e, pos) { // Update the Scroll Position and Offset
}); This works pretty well on mobile for questions that do not require dragging and dropping as the touch movements needed for that sort of conflict with SlimScroll, so I'd recommend not using it for PGR. However, the respondent has to scroll to the bottom of the page to proceed in the survey, so at least there is no way for them to avoid seeing that there is a longer list. A purely CSS solution that did work on Android but not iPhone can be found here, which might be worth checking out. I added the implementation to the other post.