How to create a responsive scroll box? | XM Community
Skip to main content

I want to insert my Informed Consent in a responsive scroll box and found an old thread (5years ago) that addressed this issue and used the code provided. 

<div style="max-width:100%;width:100%;height:50vh;overflow:auto;border:8px solid yellowgreen;padding:2%">YOUR TEXT HERE</div> 

It looks great on the Survey Builder Screen, however, when I go to the Preview Screen my text is not staying in the scroll box.

I am not a coding expert but am I doing something wrong. 

 

Make sure your text is ONLY where it it says YOUR TEXT HERE. 

Here’s a demo: https://iima.au1.qualtrics.com/jfe/preview/previewId/00a1841e-33a5-49ae-a9c5-6934da853af4/SV_8HBDY4VRJnFn40J/BL_cNJh0EewfvVYr0a?Q_SurveyVersionID=current


Understand. Unless I completely misunderstand the fundamentals, I should be able to use the scrolling box code in html to create the actual box regardless of inputting any of the actual text into HTML.  

 

So now I have a scrolling box that is ready for text, shouldn't I be able to go into content editor and input my text which would eliminate the possibility of placing it in the wrong spot. 


No idea what you mean.

But your question HTML should look like this:

<div style="max-width:100%;width:100%;height:50vh;overflow:auto;border:8px solid yellowgreen;padding:2%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 

 


Thats not working. here is your HTML code which is still bleeding outside the scroll box

 


You're either doing something wrong or probably your theme/JS is interacting with the question to create this issue.

I would recommend either dropping this or hiring a developer to fix the issue. 


Leave a Reply