JS / Custom Code for Rank Order question description to "freeze" as a respondent scrolls through the list of choices. | XM Community
Skip to main content

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!

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:

#QID1 > div.Inner.BorderColor.RB > div > fieldset > div > table {
display: block !important;
overflow-y: scroll !important;
height: 500px !important;
}

#QID1 > div.Inner.BorderColor.RB > div > fieldset > div > table > thead {
top: 0;
z-index: 2;
position: sticky;
background-color: white;
}

 

@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:

#QID1 > div.Inner.BorderColor.RB > div > fieldset > div > table {
display: block !important;
overflow-y: scroll !important;
height: 500px !important;
position: relative;
}

#QID1 > div.Inner.BorderColor.RB > div > fieldset > div > table > thead {
top: 0;
z-index: 2;
position: sticky;
background-color: white;
}

 

@Tom_1842 Amazing! Works great. Really appreciate it – thank you. 

Leave a Reply


Terms & Conditions