JS / Custom Code for Rank Order question description to "freeze" as a respondent scrolls through the list of choices.
Hello,
I have a Rank Order question type using Radio buttons format for a survey question. The question asks respondents to review the entire list of choices (~15 choices) and to rank their top 5. Since it is a longer list, I’d like to incorporate a “freeze pane” concept here so as the respondent scrolls down the question label & radio buttons (1-5) still appear (or just the radio buttons (1-5) at a minimum). The survey question already incorporates JS to hide the remainder radio buttons -- that functionality is working well.
I tried following this thread but no luck:
Appreciate any help on this. Thank you!
Page 1 / 1
You could try adding the below CSS to the Style section of the Look & Feel, updating the QID for whatever your Rank Order question is in the survey:
@Tom_1842 Thanks for your help! At initial glance this CSS works great. However, I’m encountering an odd behavior as I’m testing the question. If I were to rank/select an item that is near the bottom of the list of choices, then the “block” of items crops and I lose the ability to scroll back up to the other choices (the radio buttons also disappear).
Any insight on this by chance?
For example, in this screenshot, I chose to rank “Item 17” as my #2. Then the list of choices/block cropped and lost the radio buttons “freeze pane” view. If I were to scroll back up from this view in the screenshot, I can only scroll up to “Item 8” (and still missing radio buttons). I can no longer see Items 1-7.
I think I see what you mean. Try adding a position:relative to the table, like in the below: