How to create a responsive scroll box? | XM Community
Solved

How to create a responsive scroll box?

M
Badge +1
Hello community!

I have a consent form as my first question in a survey however due to the length I have it in a continuous scroll box. However the scroll box isn't responsive so in the mobile preview, it's off the side of the screen (photo attached). Any ideas on how I can make this box responsive?

Thanks!
Marianne


!
icon

Best answer by TomG 8 February 2019, 18:52

View original

14 replies

fleb
Rank
Userlevel 5
Badge +6
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).
TomG
Rank
Userlevel 7
Badge +27
@mariannedawson,

You can use width and max-width, as in:
```
<textarea style="max-width:100%;width:100%;height:50vh" readonly>
text goes here
</textarea>
```
You'll get something like:
!
M
Badge +1
@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!
M
Badge +1
@TomG, that works great! Thank you.
S
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
S
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 <
M
Badge +1
Thanks @spolizzi! Your code works great.
L
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!
M
Badge +1
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
L
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?
TomG
Rank
Userlevel 7
Badge +27
> @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
B
Badge +1

Hello TomG
I used the code which worked well. However, I want to bold, italic and highlight some of texts in the consent form. Is it possible to do that? When I copy and paste the text it becomes plain text and I do not find any options to bold, italic and highlight. I am an newbie to coding, Thanks

TomG
Rank
Userlevel 7
Badge +27

https://community.qualtrics.com/XMcommunity/discussion/comment/54819#Comment_54819If your text is in a

you can use normal html formatting. You can't if it is in a