How to create a responsive scroll box?

Hi @mariannedawson, you could set different widths for devices with different screen width using media queries. Or you could set the width using units relative to the width of the browser window (vw).

@fleb Thanks for your suggestion! I admit I'm a total newbie to coding, would you be able to break down a bit more how I could implement this in Qualtrics? This is the code I found to create the scroll box in the first place: < div style="height:250px;width:750px;overflow:auto;border:8px solid yellowgreen;padding:2%">All the text in the scroll box.< /div> Thanks!

@TomG, that works great! Thank you.

Thank you for this question. I also needed to fit a long consent form on the first page of my survey and did not want to scare participants away. Now it looks like more like a user agreement that people are used to seeing. The code I ended up using combined the comments in this informative thread. Not sure if any of it is redundant but it seems to be working so far. <div style="max-width:100%;width:100%;height:50vh;overflow:auto;border:8px solid yellowgreen;padding:2%"> YOUR TEXT HERE</div> Cheers

Sorry, Qubie here. The code is: < div style="max-width:100%;width:100%;height:50vh;overflow:auto;border:8px solid yellowgreen;padding:2%">YOUR TEXT HERE< /div> Just remove the space after <

Thanks @spolizzi! Your code works great.

Hi all, I would also like to create a scroll box for consent information. I have just started using Qualtrics and have no coding knowledge, so my apologies for the basic question- where are you all inputting this code? Is this using the JavaScript feature in Qualtrics? I have tried using this as well as just copying and pasting the above code around my text, but I am unable to see the scroll box. Any guidance you could offer would be much appreciated!

Hi @lbjones! When you select your text question area you'll see on the top right side two blue boxes, one says "HTML View" and the other says "Normal View". You'll want to get into "HTML View" and copy/paste the code. I ended up using the below code. Just remove the space after the first and last "<": < div style="max-width:100%;width:100%;height:30vh;overflow:auto;border:5px solid yellowgreen;padding:2%">All the text in the scroll box.< /div> You can change the colour of the border box by inputting any of the colour names at this link: https://www.w3schools.com/colors/colors_names.asp

Perfect, thank you very much for your explanation @mariannedawson ! I am wondering if you, or any of the other contributors to this thread ( @TomG @spolizzi @fleb ) have any idea how to program a scrollable box that must be scrolled all the way to the bottom before the "I agree" option or continue arrows can be selected? Would these conditions even be possible to set up within Qualtrics?

> @lbjones said: > Perfect, thank you very much for your explanation @mariannedawson ! > > I am wondering if you, or any of the other contributors to this thread ( @TomG @spolizzi @fleb ) have any idea how to program a scrollable box that must be scrolled all the way to the bottom before the "I agree" option or continue arrows can be selected? Would these conditions even be possible to set up within Qualtrics? See this: https://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery