Solved

How to create a responsive scroll box?

5 years ago
7 February 2019
14 replies
1 view

mariannedawson
10 replies

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

https://community.qualtrics.com/XMcommunity/discussion/comment/54820#Comment_54820Thank you.

Userlevel 7

+27

TomG
Level 8 ●●●●●●●●
5562 replies
1 year ago
30 January 2023

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

.<br></p></body>
                                
            
                        </div>

<div class="post__footer qa-topic-post-footer">
                    
                                    
                            <div class="post__like-list is-inactive"
                    data-component="post-likes"
                    data-data='{"postId":53232,"likes":[],"currentUser":[],"translations":{"Forum":{"post.like.number":"{numberOfLikes} person likes this|{numberOfLikes} people like this","post.like.number.only_self":"You like this","post.like.number.including_self":"You and {numberOfLikes} other person like this|You and {numberOfLikes} other people like this"}}}'></div>
            
            <div data-preact="content/post-actions" class="" data-props="{"topicId":null,"postId":53232,"privateId":null,"privateReplyId":11233,"contentType":"question","topicTitle":"How to create a responsive scroll box?","isLiked":false,"postPrivateId":53232,"showLike":true,"showQuote":false,"showBestAnswer":false,"showEdit":false,"showReport":true,"quoteText":"<body><p><a href=\"https:\/\/community.qualtrics.com\/XMcommunity\/discussion\/comment\/54819#Comment_54819\">https:\/\/community.qualtrics.com\/XMcommunity\/discussion\/comment\/54819#Comment_54819<\/a>If your text is in a <div> you can use normal html formatting. You can't if it is in a <textarea>.<br><\/p><\/body>","quoteUsername":"TomG","translations":{"Common":{"like":"Like","unlike":"Unlike"},"Forum":{"Quote":"Quote","Share":"Share"}}}"><ul class="list clearfix text--meta post__actions qa-post-actions"><li class="post__action-item"><a class="link link--quiet icon--b icon--thumb-up qa-like-link post__action-link" href="#"><span class="post__action-link__text">Like</span></a></li><li class="post__action-item"><a class="link link--quiet icon--b icon--quote qa-icon-quote post__action-link" href="#"><span class="post__action-link__text">Quote</span></a></li></ul></div>

</div>
    
    <div class="post__user__meta">
        <ul class="list list--dot-seperated text--meta">
            <li>
                
<div class="group--inline">
            <a href="/members/basetmishkat-27886" title="BasetMishkat"
           class="username qa-username link link--quiet " >
            BasetMishkat
        </a>
            </div>

</li>
                                    <li class="is-hidden-S">
                4 replies
            </li>
                            <li class="list-item--float-right list-item--no-dot">
                    <a href="/custom-code-12/how-to-create-a-responsive-scroll-box-3327?postid=53231#post53231" class="post__date">

<div class="tooltip__content tooltip__content--publish-date js-tooltip-content">30 January 2023</div>

</div>
                    </a>
                </li>
                                </ul>
    </div>

<div class="post__footer qa-topic-post-footer">
                    
                                    
                            <div class="post__like-list is-inactive"
                    data-component="post-likes"
                    data-data='{"postId":53231,"likes":[],"currentUser":[],"translations":{"Forum":{"post.like.number":"{numberOfLikes} person likes this|{numberOfLikes} people like this","post.like.number.only_self":"You like this","post.like.number.including_self":"You and {numberOfLikes} other person like this|You and {numberOfLikes} other people like this"}}}'></div>
            
            <div data-preact="content/post-actions" class="" data-props="{"topicId":null,"postId":53231,"privateId":null,"privateReplyId":11232,"contentType":"question","topicTitle":"How to create a responsive scroll box?","isLiked":false,"postPrivateId":53231,"showLike":true,"showQuote":false,"showBestAnswer":false,"showEdit":false,"showReport":true,"quoteText":"<body><p>Hello <a href=\"\/members\/TomG-373\">TomG<\/a><br>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<br><\/p><\/body>","quoteUsername":"BasetMishkat","translations":{"Common":{"like":"Like","unlike":"Unlike"},"Forum":{"Quote":"Quote","Share":"Share"}}}"><ul class="list clearfix text--meta post__actions qa-post-actions"><li class="post__action-item"><a class="link link--quiet icon--b icon--thumb-up qa-like-link post__action-link" href="#"><span class="post__action-link__text">Like</span></a></li><li class="post__action-item"><a class="link link--quiet icon--b icon--quote qa-icon-quote post__action-link" href="#"><span class="post__action-link__text">Quote</span></a></li></ul></div>

<div class="reputation ">
                <div class="reputation__level--7">Userlevel 7</div>
            </div>

</div>
    
    <div class="post__user__meta">
        <ul class="list list--dot-seperated text--meta">
            <li>
                
<div class="group--inline">
            <a href="/members/tomg-373" title="TomG"
           class="username qa-username link link--quiet " >
            TomG
        </a>
            </div>

</li>
                                        <li class="list-item--no-dot is-hidden-S">
                    <span class="usertitle qa-usertitle">Level 8 ●●●●●●●●</span>
                </li>
                        <li class="is-hidden-S">
                5562 replies
            </li>
                            <li class="list-item--float-right list-item--no-dot">
                    <a href="/custom-code-12/how-to-create-a-responsive-scroll-box-3327?postid=19072#post19072" class="post__date">

<time class="tooltip-trigger js-tooltip-trigger  qa-latest-post-time" datetime="2019-11-06">
    4 years ago
</time>

<div class="tooltip__content tooltip__content--publish-date js-tooltip-content"> 6 November 2019</div>

</div>
                    </a>
                </li>
                                </ul>
    </div>

<div class="post__content js-content--original qa-topic-post-content post__content--new-editor" data-helper="gallery" data-data='{"delegate": "img:not([src*=\"emojione\"]), a.fancybox img", "type": "image"}'>
        > <a href="/members/lbjones-7474">@lbjones</a> said:<br />
> Perfect, thank you very much for your explanation <a href="/members/mariannedawson-4501">@mariannedawson</a> !<br />
> <br />
> I am wondering if you, or any of the other contributors to this thread ( <a href="/members/TomG-373">@TomG</a> <a href="/members/spolizzi-4630">@spolizzi</a> <a href="/members/fleb-3144">@fleb</a> ) 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?<br />
<br />
See this:<br />
https://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery
                                
            
                        </div>

<div class="post__footer qa-topic-post-footer">
                    
                                    
                            <div class="post__like-list is-inactive"
                    data-component="post-likes"
                    data-data='{"postId":19072,"likes":["7474"],"currentUser":[],"translations":{"Forum":{"post.like.number":"{numberOfLikes} person likes this|{numberOfLikes} people like this","post.like.number.only_self":"You like this","post.like.number.including_self":"You and {numberOfLikes} other person like this|You and {numberOfLikes} other people like this"}}}'></div>
            
            <div data-preact="content/post-actions" class="" data-props="{"topicId":null,"postId":19072,"privateId":null,"privateReplyId":11231,"contentType":"question","topicTitle":"How to create a responsive scroll box?","isLiked":false,"postPrivateId":19072,"showLike":true,"showQuote":false,"showBestAnswer":false,"showEdit":false,"showReport":true,"quoteText":"&gt; <a href=\"\/members\/lbjones-7474\">@lbjones<\/a> said:<br \/>\n&gt; Perfect, thank you very much for your explanation <a href=\"\/members\/mariannedawson-4501\">@mariannedawson<\/a> !<br \/>\n&gt; <br \/>\n&gt; I am wondering if you, or any of the other contributors to this thread ( <a href=\"\/members\/TomG-373\">@TomG<\/a> <a href=\"\/members\/spolizzi-4630\">@spolizzi<\/a> <a href=\"\/members\/fleb-3144\">@fleb<\/a> ) 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?<br \/>\n<br \/>\nSee this:<br \/>\nhttps:\/\/stackoverflow.com\/questions\/6271237\/detecting-when-user-scrolls-to-bottom-of-div-with-jquery","quoteUsername":"TomG","translations":{"Common":{"like":"Like","unlike":"Unlike"},"Forum":{"Quote":"Quote","Share":"Share"}}}"><ul class="list clearfix text--meta post__actions qa-post-actions"><li class="post__action-item"><a class="link link--quiet icon--b icon--thumb-up qa-like-link post__action-link" href="#"><span class="post__action-link__text">Like</span></a></li><li class="post__action-item"><a class="link link--quiet icon--b icon--quote qa-icon-quote post__action-link" href="#"><span class="post__action-link__text">Quote</span></a></li></ul></div>

</div>
    
    <div class="post__user__meta">
        <ul class="list list--dot-seperated text--meta">
            <li>
                
<div class="group--inline">
            <a href="/members/lbjones-7474" title="lbjones"
           class="username qa-username link link--quiet " >
            lbjones
        </a>
            </div>

</li>
                                    <li class="is-hidden-S">
                2 replies
            </li>
                            <li class="list-item--float-right list-item--no-dot">
                    <a href="/custom-code-12/how-to-create-a-responsive-scroll-box-3327?postid=19071#post19071" class="post__date">

<time class="tooltip-trigger js-tooltip-trigger  qa-latest-post-time" datetime="2019-11-06">
    4 years ago
</time>

<div class="tooltip__content tooltip__content--publish-date js-tooltip-content"> 6 November 2019</div>

</div>
                    </a>
                </li>
                                </ul>
    </div>

<div class="post__content js-content--original qa-topic-post-content post__content--new-editor" data-helper="gallery" data-data='{"delegate": "img:not([src*=\"emojione\"]), a.fancybox img", "type": "image"}'>
        Perfect, thank you very much for your explanation <a href="/members/mariannedawson-4501">@mariannedawson</a> !<br />
<br />
I am wondering if you, or any of the other contributors to this thread ( <a href="/members/TomG-373">@TomG</a> <a href="/members/spolizzi-4630">@spolizzi</a> <a href="/members/fleb-3144">@fleb</a> ) 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?
                                
            
                        </div>

<div class="post__footer qa-topic-post-footer">
                    
                                    
                            <div class="post__like-list is-inactive"
                    data-component="post-likes"
                    data-data='{"postId":19071,"likes":[],"currentUser":[],"translations":{"Forum":{"post.like.number":"{numberOfLikes} person likes this|{numberOfLikes} people like this","post.like.number.only_self":"You like this","post.like.number.including_self":"You and {numberOfLikes} other person like this|You and {numberOfLikes} other people like this"}}}'></div>
            
            <div data-preact="content/post-actions" class="" data-props="{"topicId":null,"postId":19071,"privateId":null,"privateReplyId":11230,"contentType":"question","topicTitle":"How to create a responsive scroll box?","isLiked":false,"postPrivateId":19071,"showLike":true,"showQuote":false,"showBestAnswer":false,"showEdit":false,"showReport":true,"quoteText":"Perfect, thank you very much for your explanation <a href=\"\/members\/mariannedawson-4501\">@mariannedawson<\/a> !<br \/>\n<br \/>\nI am wondering if you, or any of the other contributors to this thread ( <a href=\"\/members\/TomG-373\">@TomG<\/a> <a href=\"\/members\/spolizzi-4630\">@spolizzi<\/a> <a href=\"\/members\/fleb-3144\">@fleb<\/a> ) 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?","quoteUsername":"lbjones","translations":{"Common":{"like":"Like","unlike":"Unlike"},"Forum":{"Quote":"Quote","Share":"Share"}}}"><ul class="list clearfix text--meta post__actions qa-post-actions"><li class="post__action-item"><a class="link link--quiet icon--b icon--thumb-up qa-like-link post__action-link" href="#"><span class="post__action-link__text">Like</span></a></li><li class="post__action-item"><a class="link link--quiet icon--b icon--quote qa-icon-quote post__action-link" href="#"><span class="post__action-link__text">Quote</span></a></li></ul></div>

</div>
    
    <div class="post__user__meta">
        <ul class="list list--dot-seperated text--meta">
            <li>
                
<div class="group--inline">
            <a href="/members/mariannedawson-4501" title="mariannedawson"
           class="username qa-username link link--quiet " >
            mariannedawson
        </a>
            </div>

</li>
                            <li class="list-item--no-dot">
                    <span class="pill pill--author pill--uppercase pill--inline">Author</span>
                </li>
                                    <li class="is-hidden-S">
                10 replies
            </li>
                            <li class="list-item--float-right list-item--no-dot">
                    <a href="/custom-code-12/how-to-create-a-responsive-scroll-box-3327?postid=19036#post19036" class="post__date">

<time class="tooltip-trigger js-tooltip-trigger  qa-latest-post-time" datetime="2019-11-06">
    4 years ago
</time>

<div class="tooltip__content tooltip__content--publish-date js-tooltip-content"> 6 November 2019</div>

</div>
                    </a>
                </li>
                                </ul>
    </div>

<div class="post__content js-content--original qa-topic-post-content post__content--new-editor" data-helper="gallery" data-data='{"delegate": "img:not([src*=\"emojione\"]), a.fancybox img", "type": "image"}'>
        Hi <a href="/members/lbjones-7474">@lbjones</a>!  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.  <br />
<br />
I ended up using the below code.  Just remove the space after the first and last "<":<br />
<br />
 < 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><br />
<br />
You can change the colour of the border box by inputting any of the colour names at this link: <a href="https://www.w3schools.com/colors/colors_names.asp ">https://www.w3schools.com/colors/colors_names.asp</a>
                                
            
                        </div>

<div class="post__footer qa-topic-post-footer">
                    
                                    
                            <div class="post__like-list is-inactive"
                    data-component="post-likes"
                    data-data='{"postId":19036,"likes":[],"currentUser":[],"translations":{"Forum":{"post.like.number":"{numberOfLikes} person likes this|{numberOfLikes} people like this","post.like.number.only_self":"You like this","post.like.number.including_self":"You and {numberOfLikes} other person like this|You and {numberOfLikes} other people like this"}}}'></div>
            
            <div data-preact="content/post-actions" class="" data-props="{"topicId":null,"postId":19036,"privateId":null,"privateReplyId":11229,"contentType":"question","topicTitle":"How to create a responsive scroll box?","isLiked":false,"postPrivateId":19036,"showLike":true,"showQuote":false,"showBestAnswer":false,"showEdit":false,"showReport":true,"quoteText":"Hi <a href=\"\/members\/lbjones-7474\">@lbjones<\/a>!  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.  <br \/>\n<br \/>\nI ended up using the below code.  Just remove the space after the first and last \"&lt;\":<br \/>\n<br \/>\n &lt; div style=\"max-width:100%;width:100%;height:30vh;overflow:auto;border:5px solid yellowgreen;padding:2%\"&gt;All the text in the scroll box.&lt; \/div&gt;<br \/>\n<br \/>\nYou can change the colour of the border box by inputting any of the colour names at this link: <a href=\"https:\/\/www.w3schools.com\/colors\/colors_names.asp \">https:\/\/www.w3schools.com\/colors\/colors_names.asp<\/a>","quoteUsername":"mariannedawson","translations":{"Common":{"like":"Like","unlike":"Unlike"},"Forum":{"Quote":"Quote","Share":"Share"}}}"><ul class="list clearfix text--meta post__actions qa-post-actions"><li class="post__action-item"><a class="link link--quiet icon--b icon--thumb-up qa-like-link post__action-link" href="#"><span class="post__action-link__text">Like</span></a></li><li class="post__action-item"><a class="link link--quiet icon--b icon--quote qa-icon-quote post__action-link" href="#"><span class="post__action-link__text">Quote</span></a></li></ul></div>

<time class="tooltip-trigger js-tooltip-trigger  qa-latest-post-time" datetime="2019-11-05">
    4 years ago
</time>

<div class="tooltip__content tooltip__content--publish-date js-tooltip-content"> 5 November 2019</div>

</div>
                    </a>
                </li>
                                </ul>
    </div>

<div class="post__content js-content--original qa-topic-post-content post__content--new-editor" data-helper="gallery" data-data='{"delegate": "img:not([src*=\"emojione\"]), a.fancybox img", "type": "image"}'>
        Hi all, <br />
<br />
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!
                                
            
                        </div>

<div class="post__footer qa-topic-post-footer">
                    
                                    
                            <div class="post__like-list is-inactive"
                    data-component="post-likes"
                    data-data='{"postId":19035,"likes":["12208"],"currentUser":[],"translations":{"Forum":{"post.like.number":"{numberOfLikes} person likes this|{numberOfLikes} people like this","post.like.number.only_self":"You like this","post.like.number.including_self":"You and {numberOfLikes} other person like this|You and {numberOfLikes} other people like this"}}}'></div>
            
            <div data-preact="content/post-actions" class="" data-props="{"topicId":null,"postId":19035,"privateId":null,"privateReplyId":11228,"contentType":"question","topicTitle":"How to create a responsive scroll box?","isLiked":false,"postPrivateId":19035,"showLike":true,"showQuote":false,"showBestAnswer":false,"showEdit":false,"showReport":true,"quoteText":"Hi all, <br \/>\n<br \/>\nI 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!","quoteUsername":"lbjones","translations":{"Common":{"like":"Like","unlike":"Unlike"},"Forum":{"Quote":"Quote","Share":"Share"}}}"><ul class="list clearfix text--meta post__actions qa-post-actions"><li class="post__action-item"><a class="link link--quiet icon--b icon--thumb-up qa-like-link post__action-link" href="#"><span class="post__action-link__text">Like</span></a></li><li class="post__action-item"><a class="link link--quiet icon--b icon--quote qa-icon-quote post__action-link" href="#"><span class="post__action-link__text">Quote</span></a></li></ul></div>

<time class="tooltip-trigger js-tooltip-trigger  qa-latest-post-time" datetime="2019-02-21">
    5 years ago
</time>

<div class="tooltip__content tooltip__content--publish-date js-tooltip-content">21 February 2019</div>

</div>
                    </a>
                </li>
                                </ul>
    </div>

<div class="post__footer qa-topic-post-footer">
                    
                                    
                            <div class="post__like-list is-inactive"
                    data-component="post-likes"
                    data-data='{"postId":11412,"likes":[],"currentUser":[],"translations":{"Forum":{"post.like.number":"{numberOfLikes} person likes this|{numberOfLikes} people like this","post.like.number.only_self":"You like this","post.like.number.including_self":"You and {numberOfLikes} other person like this|You and {numberOfLikes} other people like this"}}}'></div>
            
            <div data-preact="content/post-actions" class="" data-props="{"topicId":null,"postId":11412,"privateId":null,"privateReplyId":11227,"contentType":"question","topicTitle":"How to create a responsive scroll box?","isLiked":false,"postPrivateId":11412,"showLike":true,"showQuote":false,"showBestAnswer":false,"showEdit":false,"showReport":true,"quoteText":"Thanks <a href=\"\/members\/spolizzi-4630\">@spolizzi<\/a>!  Your code works great.","quoteUsername":"mariannedawson","translations":{"Common":{"like":"Like","unlike":"Unlike"},"Forum":{"Quote":"Quote","Share":"Share"}}}"><ul class="list clearfix text--meta post__actions qa-post-actions"><li class="post__action-item"><a class="link link--quiet icon--b icon--thumb-up qa-like-link post__action-link" href="#"><span class="post__action-link__text">Like</span></a></li><li class="post__action-item"><a class="link link--quiet icon--b icon--quote qa-icon-quote post__action-link" href="#"><span class="post__action-link__text">Quote</span></a></li></ul></div>

</div>
    
    <div class="post__user__meta">
        <ul class="list list--dot-seperated text--meta">
            <li>
                
<div class="group--inline">
            <a href="/members/spolizzi-4630" title="spolizzi"
           class="username qa-username link link--quiet " >
            spolizzi
        </a>
            </div>

<time class="tooltip-trigger js-tooltip-trigger  qa-latest-post-time" datetime="2019-02-20">
    5 years ago
</time>

<div class="tooltip__content tooltip__content--publish-date js-tooltip-content">20 February 2019</div>

</div>
                    </a>
                </li>
                                </ul>
    </div>

<div class="post__content js-content--original qa-topic-post-content post__content--new-editor" data-helper="gallery" data-data='{"delegate": "img:not([src*=\"emojione\"]), a.fancybox img", "type": "image"}'>
        Sorry, Qubie here. The code is:<br />
<br />
< div style="max-width:100%;width:100%;height:50vh;overflow:auto;border:8px solid yellowgreen;padding:2%">YOUR TEXT HERE< /div><br />
<br />
Just remove the space after <
                                
            
                        </div>

<div class="post__footer qa-topic-post-footer">
                    
                                    
                            <div class="post__like-list is-inactive"
                    data-component="post-likes"
                    data-data='{"postId":11378,"likes":["4501"],"currentUser":[],"translations":{"Forum":{"post.like.number":"{numberOfLikes} person likes this|{numberOfLikes} people like this","post.like.number.only_self":"You like this","post.like.number.including_self":"You and {numberOfLikes} other person like this|You and {numberOfLikes} other people like this"}}}'></div>
            
            <div data-preact="content/post-actions" class="" data-props="{"topicId":null,"postId":11378,"privateId":null,"privateReplyId":11226,"contentType":"question","topicTitle":"How to create a responsive scroll box?","isLiked":false,"postPrivateId":11378,"showLike":true,"showQuote":false,"showBestAnswer":false,"showEdit":false,"showReport":true,"quoteText":"Sorry, Qubie here. The code is:<br \/>\n<br \/>\n&lt; div style=\"max-width:100%;width:100%;height:50vh;overflow:auto;border:8px solid yellowgreen;padding:2%\"&gt;YOUR TEXT HERE&lt; \/div&gt;<br \/>\n<br \/>\nJust remove the space after &lt;","quoteUsername":"spolizzi","translations":{"Common":{"like":"Like","unlike":"Unlike"},"Forum":{"Quote":"Quote","Share":"Share"}}}"><ul class="list clearfix text--meta post__actions qa-post-actions"><li class="post__action-item"><a class="link link--quiet icon--b icon--thumb-up qa-like-link post__action-link" href="#"><span class="post__action-link__text">Like</span></a></li><li class="post__action-item"><a class="link link--quiet icon--b icon--quote qa-icon-quote post__action-link" href="#"><span class="post__action-link__text">Quote</span></a></li></ul></div>

<time class="tooltip-trigger js-tooltip-trigger  qa-latest-post-time" datetime="2019-02-20">
    5 years ago
</time>

<div class="tooltip__content tooltip__content--publish-date js-tooltip-content">20 February 2019</div>

</div>
                    </a>
                </li>
                                </ul>
    </div>

<div class="post__content js-content--original qa-topic-post-content post__content--new-editor" data-helper="gallery" data-data='{"delegate": "img:not([src*=\"emojione\"]), a.fancybox img", "type": "image"}'>
        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.<br />
<br />
<div style="max-width:100%;width:100%;height:50vh;overflow:auto;border:8px solid yellowgreen;padding:2%"> YOUR TEXT HERE</div><br />
<br />
Cheers
                                
            
                        </div>

<div class="post__footer qa-topic-post-footer">
                    
                                    
                            <div class="post__like-list is-inactive"
                    data-component="post-likes"
                    data-data='{"postId":11377,"likes":[],"currentUser":[],"translations":{"Forum":{"post.like.number":"{numberOfLikes} person likes this|{numberOfLikes} people like this","post.like.number.only_self":"You like this","post.like.number.including_self":"You and {numberOfLikes} other person like this|You and {numberOfLikes} other people like this"}}}'></div>
            
            <div data-preact="content/post-actions" class="" data-props="{"topicId":null,"postId":11377,"privateId":null,"privateReplyId":11225,"contentType":"question","topicTitle":"How to create a responsive scroll box?","isLiked":false,"postPrivateId":11377,"showLike":true,"showQuote":false,"showBestAnswer":false,"showEdit":false,"showReport":true,"quoteText":"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.<br \/>\n<br \/>\n&lt;div style=\"max-width:100%;width:100%;height:50vh;overflow:auto;border:8px solid yellowgreen;padding:2%\"&gt; YOUR TEXT HERE&lt;\/div&gt;<br \/>\n<br \/>\nCheers","quoteUsername":"spolizzi","translations":{"Common":{"like":"Like","unlike":"Unlike"},"Forum":{"Quote":"Quote","Share":"Share"}}}"><ul class="list clearfix text--meta post__actions qa-post-actions"><li class="post__action-item"><a class="link link--quiet icon--b icon--thumb-up qa-like-link post__action-link" href="#"><span class="post__action-link__text">Like</span></a></li><li class="post__action-item"><a class="link link--quiet icon--b icon--quote qa-icon-quote post__action-link" href="#"><span class="post__action-link__text">Quote</span></a></li></ul></div>

<time class="tooltip-trigger js-tooltip-trigger  qa-latest-post-time" datetime="2019-02-08">
    5 years ago
</time>

<div class="tooltip__content tooltip__content--publish-date js-tooltip-content"> 8 February 2019</div>

</div>
                    </a>
                </li>
                                </ul>
    </div>

<div class="post__footer qa-topic-post-footer">
                    
                                    
                            <div class="post__like-list is-inactive"
                    data-component="post-likes"
                    data-data='{"postId":11069,"likes":[],"currentUser":[],"translations":{"Forum":{"post.like.number":"{numberOfLikes} person likes this|{numberOfLikes} people like this","post.like.number.only_self":"You like this","post.like.number.including_self":"You and {numberOfLikes} other person like this|You and {numberOfLikes} other people like this"}}}'></div>
            
            <div data-preact="content/post-actions" class="" data-props="{"topicId":null,"postId":11069,"privateId":null,"privateReplyId":11224,"contentType":"question","topicTitle":"How to create a responsive scroll box?","isLiked":false,"postPrivateId":11069,"showLike":true,"showQuote":false,"showBestAnswer":false,"showEdit":false,"showReport":true,"quoteText":"<a href=\"\/members\/TomG-373\">@TomG<\/a>, that works great!  Thank you.","quoteUsername":"mariannedawson","translations":{"Common":{"like":"Like","unlike":"Unlike"},"Forum":{"Quote":"Quote","Share":"Share"}}}"><ul class="list clearfix text--meta post__actions qa-post-actions"><li class="post__action-item"><a class="link link--quiet icon--b icon--thumb-up qa-like-link post__action-link" href="#"><span class="post__action-link__text">Like</span></a></li><li class="post__action-item"><a class="link link--quiet icon--b icon--quote qa-icon-quote post__action-link" href="#"><span class="post__action-link__text">Quote</span></a></li></ul></div>

<time class="tooltip-trigger js-tooltip-trigger  qa-latest-post-time" datetime="2019-02-08">
    5 years ago
</time>

<div class="tooltip__content tooltip__content--publish-date js-tooltip-content"> 8 February 2019</div>

</div>
                    </a>
                </li>
                                </ul>
    </div>

<div class="post__content js-content--original qa-topic-post-content post__content--new-editor" data-helper="gallery" data-data='{"delegate": "img:not([src*=\"emojione\"]), a.fancybox img", "type": "image"}'>
        <a href="/members/fleb-3144">@fleb</a> 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:<br />
<br />
< div style="height:250px;width:750px;overflow:auto;border:8px solid yellowgreen;padding:2%">All the text in the scroll box.< /div><br />
<br />
<br />
Thanks!
                                
            
                        </div>

<div class="post__footer qa-topic-post-footer">
                    
                                    
                            <div class="post__like-list is-inactive"
                    data-component="post-likes"
                    data-data='{"postId":11068,"likes":[],"currentUser":[],"translations":{"Forum":{"post.like.number":"{numberOfLikes} person likes this|{numberOfLikes} people like this","post.like.number.only_self":"You like this","post.like.number.including_self":"You and {numberOfLikes} other person like this|You and {numberOfLikes} other people like this"}}}'></div>
            
            <div data-preact="content/post-actions" class="" data-props="{"topicId":null,"postId":11068,"privateId":null,"privateReplyId":11223,"contentType":"question","topicTitle":"How to create a responsive scroll box?","isLiked":false,"postPrivateId":11068,"showLike":true,"showQuote":false,"showBestAnswer":false,"showEdit":false,"showReport":true,"quoteText":"<a href=\"\/members\/fleb-3144\">@fleb<\/a> 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:<br \/>\n<br \/>\n&lt; div style=\"height:250px;width:750px;overflow:auto;border:8px solid yellowgreen;padding:2%\"&gt;All the text in the scroll box.&lt; \/div&gt;<br \/>\n<br \/>\n<br \/>\nThanks!","quoteUsername":"mariannedawson","translations":{"Common":{"like":"Like","unlike":"Unlike"},"Forum":{"Quote":"Quote","Share":"Share"}}}"><ul class="list clearfix text--meta post__actions qa-post-actions"><li class="post__action-item"><a class="link link--quiet icon--b icon--thumb-up qa-like-link post__action-link" href="#"><span class="post__action-link__text">Like</span></a></li><li class="post__action-item"><a class="link link--quiet icon--b icon--quote qa-icon-quote post__action-link" href="#"><span class="post__action-link__text">Quote</span></a></li></ul></div>

<div class="reputation ">
                <div class="reputation__level--7">Userlevel 7</div>
            </div>

<time class="tooltip-trigger js-tooltip-trigger  qa-latest-post-time" datetime="2019-02-08">
    5 years ago
</time>

<div class="tooltip__content tooltip__content--publish-date js-tooltip-content"> 8 February 2019</div>

</div>
                    </a>
                </li>
                                        <li class="list-item--no-dot-S">
                    <span class="pill pill--answer pill--uppercase pill--inline">Answer</span>
                </li>
                    </ul>
    </div>

<div class="post__footer qa-topic-post-footer">
                    
                                    
                            <div class="post__like-list is-inactive"
                    data-component="post-likes"
                    data-data='{"postId":11067,"likes":["4501","27886"],"currentUser":[],"translations":{"Forum":{"post.like.number":"{numberOfLikes} person likes this|{numberOfLikes} people like this","post.like.number.only_self":"You like this","post.like.number.including_self":"You and {numberOfLikes} other person like this|You and {numberOfLikes} other people like this"}}}'></div>
            
            <div data-preact="content/post-actions" class="" data-props="{"topicId":null,"postId":11067,"privateId":null,"privateReplyId":11222,"contentType":"question","topicTitle":"How to create a responsive scroll box?","isLiked":false,"postPrivateId":11067,"showLike":true,"showQuote":false,"showBestAnswer":false,"showEdit":false,"showReport":true,"quoteText":"<a href=\"\/members\/mariannedawson-4501\">@mariannedawson<\/a>,<br \/>\n<br \/>\nYou can use width and max-width, as in:<br \/>\n```<br \/>\n&lt;textarea style=\"max-width:100%;width:100%;height:50vh\" readonly&gt;<br \/>\ntext goes here<br \/>\n&lt;\/textarea&gt;<br \/>\n```<br \/>\nYou'll get something like:<br \/>\n!<img src=\"https:\/\/uploads-us-west-2.insided.com\/qualtrics-us\/attachment\/bx_saop5t1s7gkw.png\"\/>","quoteUsername":"TomG","translations":{"Common":{"like":"Like","unlike":"Unlike"},"Forum":{"Quote":"Quote","Share":"Share"}}}"><ul class="list clearfix text--meta post__actions qa-post-actions"><li class="post__action-item"><a class="link link--quiet icon--b icon--thumb-up qa-like-link post__action-link" href="#"><span class="post__action-link__text">Like</span></a></li><li class="post__action-item"><a class="link link--quiet icon--b icon--quote qa-icon-quote post__action-link" href="#"><span class="post__action-link__text">Quote</span></a></li></ul></div>

<div class="reputation ">
                <div class="reputation__level--5">Userlevel 5</div>
            </div>

</div>
    
    <div class="post__user__meta">
        <ul class="list list--dot-seperated text--meta">
            <li>
                
<div class="group--inline">
            <a href="/members/fleb-3144" title="fleb"
           class="username qa-username link link--quiet " >
            fleb
        </a>
            </div>

</li>
                                        <li class="list-item--no-dot is-hidden-S">
                    <span class="usertitle qa-usertitle">Level 3 ●●●</span>
                </li>
                        <li class="is-hidden-S">
                197 replies
            </li>
                            <li class="list-item--float-right list-item--no-dot">
                    <a href="/custom-code-12/how-to-create-a-responsive-scroll-box-3327?postid=11056#post11056" class="post__date">

<time class="tooltip-trigger js-tooltip-trigger  qa-latest-post-time" datetime="2019-02-08">
    5 years ago
</time>

<div class="tooltip__content tooltip__content--publish-date js-tooltip-content"> 8 February 2019</div>

</div>
                    </a>
                </li>
                                </ul>
    </div>

<div class="post__content js-content--original qa-topic-post-content post__content--new-editor" data-helper="gallery" data-data='{"delegate": "img:not([src*=\"emojione\"]), a.fancybox img", "type": "image"}'>
        Hi <a href="/members/mariannedawson-4501">@mariannedawson</a>,<br />
you could set different widths for devices with different screen width using <a href="https://www.w3schools.com/css/css3_mediaqueries_ex.asp ">media queries</a>. Or you could set the width using <a href="https://www.w3schools.com/cssref/css_units.asp ">units</a> relative to the width of the browser window (vw).
                                
            
                        </div>

<div class="post__footer qa-topic-post-footer">
                    
                                    
                            <div class="post__like-list is-inactive"
                    data-component="post-likes"
                    data-data='{"postId":11056,"likes":[],"currentUser":[],"translations":{"Forum":{"post.like.number":"{numberOfLikes} person likes this|{numberOfLikes} people like this","post.like.number.only_self":"You like this","post.like.number.including_self":"You and {numberOfLikes} other person like this|You and {numberOfLikes} other people like this"}}}'></div>
            
            <div data-preact="content/post-actions" class="" data-props="{"topicId":null,"postId":11056,"privateId":null,"privateReplyId":11221,"contentType":"question","topicTitle":"How to create a responsive scroll box?","isLiked":false,"postPrivateId":11056,"showLike":true,"showQuote":false,"showBestAnswer":false,"showEdit":false,"showReport":true,"quoteText":"Hi <a href=\"\/members\/mariannedawson-4501\">@mariannedawson<\/a>,<br \/>\nyou could set different widths for devices with different screen width using <a href=\"https:\/\/www.w3schools.com\/css\/css3_mediaqueries_ex.asp \">media queries<\/a>. Or you could set the width using <a href=\"https:\/\/www.w3schools.com\/cssref\/css_units.asp \">units<\/a> relative to the width of the browser window (vw).","quoteUsername":"fleb","translations":{"Common":{"like":"Like","unlike":"Unlike"},"Forum":{"Quote":"Quote","Share":"Share"}}}"><ul class="list clearfix text--meta post__actions qa-post-actions"><li class="post__action-item"><a class="link link--quiet icon--b icon--thumb-up qa-like-link post__action-link" href="#"><span class="post__action-link__text">Like</span></a></li><li class="post__action-item"><a class="link link--quiet icon--b icon--quote qa-icon-quote post__action-link" href="#"><span class="post__action-link__text">Quote</span></a></li></ul></div>

</div>
                    
                                            <div class="box box__pad">
                    <div class="box__content qa-reply reply-editor-wrapper">
                        
                
                        
  <h3>Leave a Reply</h3>

<br/>

</div>
                        </div>
    
    </div>
</div>
<div class="full-width Template-secondary">
    <div class="sitewidth">

<div data-preact="powered-by-insided/index" class="powered-by-insided-footer" data-props="{"rootUrl":"community.qualtrics.com","termsConditions":"\/site\/terms","cookieConfig":{"use_external_modal":false,"mapping":{"required":1,"anonymous":2,"all":3}},"communityVisibility":"public","isGuestUser":true,"phrases":{"Forum":{"branded.back_to_top":"Back to top","Terms & Conditions":"Terms & Conditions","cookiepolicy.link":"Cookies"}}}"><div class="Template-footer"><div class="sitewidth box box--blend" data-component="scrollTopStickyButton"><div class="templatefoot"><a href="https://www.gainsight.com/customer-communities/" class="logo-gainsight" title="Visit Gainsight.com" target="_blank" rel="noreferrer"><span class="is-hidden">Powered by Gainsight</span></a></div><div class="templatefoot-privacy-links"><a href="/site/terms">Terms & Conditions</a></div><span class="scroll-to-top-sticky-button js-scrollto widget--base-shadow is-hidden-S custom-scroll-to-top" title="Back to top"></span></div></div></div>
    
        
</div>

<p>
        Already have an account? <a class="js-open-modal qa-register-have-account-link" data-modal="login">Login</a>
    </p>

<div id="modal_login" >
    
    <h4>Social Login </h4>

<h2>Login to the community</h2>
    
    
    <h4>Social Login </h4>

<a class="btn--cta btn--sso qa-sso-openid" href="https://community.qualtrics.com/ssoproxy/login?ssoType=openidconnect" target="_top">
            Login with OpenIdConnect
        </a>
    
    
    
    
    
    
    
    
    
                </div>
        
                <div class="qa-forgot-modal" data-helper="modal" data-data='{"modal_id": "forgot", "mainClass": "modal--forgot"}' id="modal_forgot" >
            <p>Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.</p>

<div class="form__row">
        <div class="first">
                        <label class="label required" for="forgotPassword_username">
                            Enter your e-mail address
            
            
                                </label>
        </div>
        <div class="second">
                        <input type="text" id="forgotPassword_username" name="forgotPassword[username]" required="required" />

</div>
    </div>

<div class="form-row first">
      <button type="submit" id="forgotPassword_submit" name="forgotPassword[submit]" class="btn btn--cta qa-submit-button">
        Send
    </button>
                <a href="#" class="group__item end js-open-modal qa-forgot-password-overview-link" data-modal="login">Back to overview</a>
        </div>
            <input type="hidden" id="forgotPassword__token" name="forgotPassword[_token]" value="sxHmyc4JYZaywwIdacKUAlId7SZz0u7xueVSvY1E4VM" />
</form>

</div>
    
                <div class="qa-report-modal" data-helper="modal" data-data='{"modal_id": "report", "mainClass": "modal--report"}' id="modal_report" >

</div>
    
          <div class="attachments--modal" data-helper="modal" data-data='{"modal_id": "attachments-pending-modal"}'>
        <h2>Scanning file for viruses.</h2>
        <p>Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.</p>
        <a href="#" class="mfp-close btn--cta">OK</a>
      </div>

<div class="attachments--modal" data-helper="modal" data-data='{"modal_id": "attachments-infected-modal"}'>
        <h2>This file cannot be downloaded</h2>
        <p>Sorry, our virus scanner detected that this file isn't safe to download.</p>
        <a href="#" class="mfp-close btn--cta">OK</a>
      </div>
    </div>

<div><script type="text/javascript">window.inSidedData = {"communityId":"qualtrics-us","environment":"production","language":"en","device":"desktop","user":{"userid":null,"name":"guest","role":"roles.guest","mainRole":"roles.guest","rank":"","avatar":"","rankIcon":"","rankName":"","isModerator":false,"pmUnreadCount":0,"pmTotalCount":0,"topicsCount":0,"repliesCount":0,"solvedCount":0,"loginSource":null,"registerSource":null},"page":{"pageNumber":1,"name":"Topic","path":"qualtrics-us:Content:Topic:How to create a responsive scroll box?","section":"Content","site":"qualtrics-us","title":"Topic:How to create a responsive scroll box?","url":"/custom-code-12/how-to-create-a-responsive-scroll-box-3327?sort=dateline.desc","firstRender":false},"form":{"name":"","step":""},"content":{"category":{"id":12,"title":"Custom Code","type":"default"},"topic":{"id":3327,"title":"How to create a responsive scroll box?","type":"question","content_type":"question","source_id":"2792","created":1549569392,"replies":14,"is_sticky":"false","prefix":"beantwoord","tags":"HTML,Custom Code"},"post":{"id":null},"path":"Custom Code:How to create a responsive scroll box?"},"search":{"phrase":null,"count":null}}</script></div>

<div data-preact="cookie-banner/index" class="" data-props="{"level":1,"termsConditions":"\/site\/terms","cookieConfig":{"use_external_modal":false,"mapping":{"required":1,"anonymous":2,"all":3}},"phrases":{"Forum":{"cookiepolicy.title":"Cookie policy","cookiepolicy.content":"We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. <a href=\"{link}\">Learn more about our cookies.<\/a>","cookiepolicy.button":"Accept cookies","cookiepolicy.button.deny":"Deny all","cookiepolicy.link":"Cookies","cookiepolicy.modal.title":"Cookie settings","cookiepolicy.modal.content":"We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. <a href=\"{link}\">Learn more about our cookies.<\/a>","cookiepolicy.modal.level1":"Basic<br>Functional","cookiepolicy.modal.level2":"Normal<br>Functional + analytics","cookiepolicy.modal.level3":"Complete<br>Functional + analytics + social media + embedded videos"}}}"></div>

<link rel="preload" as="style" href="https://www.qualtrics.com/assets/dist/css/font.css" />
<link rel="stylesheet" href="https://www.qualtrics.com/assets/dist/css/font.css" /> 
<style>
.row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between;
}
.text-left {
    text-align: left !important;
}
.justify-content-end {
    justify-content: flex-end !important;
}

@media (max-width: 500px)
.row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

.container, .container-fluid, .container-xl, .container-lg, .container-md, .container-sm {
    width: 90%;
    padding-right: 30px;
    padding-left: 30px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 50px;
}
a {
    color: black;
}
.col-sm-6 {
    margin-right: 15px;
}
@media (min-width: 576px) 
.col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
}
footer {
    font-size: 13.05px;
}
.list-unstyled {
    padding-left: 0;
    list-style: none;
  	justify-content: left !important;

}
.headline-eyebrow {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.gradient-bar {
    mix-blend-mode: multiply;
    filter: blur(110px);
    background: linear-gradient(to right, #e372ff 6%, #a24af1 12%, #5f1ae2 18%, #4b2ce6 24%, #3341e4 30%, #1955e2 36%, #017be4 42%, #008ce8 48%, #019fed 54%, #00b1ec 60%, #02bcde 66%, #03c6cb 72%, #00cfb8 78%, #21d8a7 84%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  min-height: 80px;}

@media (min-width: 992px)
.col-lg-2 {
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
}
@media (min-width: 768px)
.col-md-4 {
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
}
@media (min-width: 576px)
.col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
}
.pb-3, .py-3 {
    padding-bottom: 20px !important;
  	padding-top:20px;
}
</style>
<div id="consent_blackbar"></div>

<footer class="site-footer anchor-inherit" role="contentinfo" data-gacontainer="garegion" data-gatext="footer">
    <div class="container text-left">
        <div class="row py-5 py-lg-6">
            <div class="col-lg-6">
                <h3 class="headline-eyebrow mb-1">Popular Use Cases</h3>
                <div class="row mb-5 mb-lg-0">
                    <div class="col-sm-6">
                        <ul class="list-unstyled">
                            <li><a href="https://www.qualtrics.com/customer-experience/">Customer Experience Management
                                    (CXM)</a>
                            </li>
                            <li><a href="https://www.qualtrics.com/customer-experience/nps-software/">NPS Software</a>
                            </li>
                            <li><a href="https://www.qualtrics.com/employee-experience/employee-engagement/">Employee
                                    Engagement
                                    Software</a></li>
                            <li><a href="https://www.qualtrics.com/core-xm/survey-software/">Online Survey Software</a>
                            </li>
                            <li><a href="https://www.qualtrics.com/market-research/">Market Research Software</a></li>
                            <li><a href="https://www.qualtrics.com/employee-experience/360-degree-feedback/">360°
                                    Employee
                                    Feedback</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <ul class="list-unstyled">
                            <li><a href="https://www.qualtrics.com/customer-experience/surveys/">Customer Survey
                                    Software</a></li>
                            <li><a href="https://www.qualtrics.com/core-xm/website-app-feedback-surveys/">Website & App
                                    Feedback</a>
                            </li>
                            <li><a href="https://www.qualtrics.com/customer-experience/voice-of-customer/">Voice of
                                    Customer
                                    Software</a></li>
                            <li><a href="https://www.qualtrics.com/employee-experience/employee-pulse-surveys/">Employee
                                    Pulse
                                    Surveys</a></li>
                            <li><a href="https://www.qualtrics.com/employee-experience/new-hire-surveys/">Onboarding &
                                    New Hire
                                    Surveys</a></li>
                            <li><a href="https://www.qualtrics.com/customer-experience/reputation-management/">Online
                                    Reputation
                                    Management</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-2 mb-5 mb-md-0">
                <h3 class="headline-eyebrow mb-1">Support</h3>
                <ul class="list-unstyled">
                    <li><a href="https://www.qualtrics.com/support-center/" rel="nofollow">Submit a Ticket</a></li>
                    <li><a href="https://www.qualtrics.com/support/" rel="nofollow">Online Help</a></li>
                    <li><a href="https://www.qualtrics.com/community/?utm_lp=website+footer" rel="nofollow">Qualtrics
                            Community</a>
                    </li>
                    <li><a href="https://www.qualtrics.com/services/" rel="nofollow">Professional Services</a></li>
                    <li><a href="https://www.qualtrics.com/product-updates/" rel="nofollow">Product Roadmap</a></li>
                    <li><a href="https://www.qualtrics.com/status/" rel="nofollow">Status</a></li>
                </ul>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-2 mb-5 mb-md-0">
                <h3 class="headline-eyebrow mb-1">Company</h3>
                <ul class="list-unstyled">
                    <li><a href="https://www.qualtrics.com/about/" rel="nofollow">About Us</a></li>
                    <li><a href="https://www.qualtrics.com/investors/">Investors</a></li>
                    <li><a href="https://www.qualtrics.com/x4summit/">X4 Summit</a></li>
                    <li><a href="https://www.qualtrics.com/careers/" rel="nofollow">Careers</a></li>
                    <li><a href="https://www.qualtrics.com/partnerships/" rel="nofollow">Partnerships</a></li>
                    <li><a href="https://www.qualtrics.com/contact/" rel="nofollow">Contact Us</a></li>
                    <li><a href="https://www.qualtrics.com/news/">Newsroom</a></li>
                </ul>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-2 ">
                <h3 class="headline-eyebrow mb-1">Resources</h3>
                <ul class="list-unstyled">
                    <li><a href="https://www.qualtrics.com/customers/" rel="nofollow">Customers</a></li>
                    <li><a href="https://www.qualtrics.com/marketplace/integrations/">Integrations</a></li>
                    <li><a href="https://www.qualtrics.com/blog/">Blog</a></li>
                    <li><a href="https://www.qualtrics.com/events/">Events</a></li>
                    <li><a href="https://www.qualtrics.com/training/" rel="nofollow">Training & Certification</a></li>
                    <li><a href="https://www.qualtrics.com/resources/">Resource Library</a></li>
                    <li><a href="https://basecamp.qualtrics.com/?utm_lp=nav-footer">XM Basecamp</a></li>
                </ul>
            </div>
        </div>
        <hr>

<div class="site-footer-end list-unstyled row py-3">
            <div id="copyright-date" class="col-sm-6 col-lg-2 mb-2 mb-lg-0">
                ©
            </div>
            <div class="col-sm-6 order-1 order-sm-0 order-lg-1 col-lg-1 d-lg-flex justify-content-end mb-sm-2 mb-lg-0">
                <a class="px-1" href="https://www.facebook.com/Qualtrics/">
                    <img src="https://www.qualtrics.com/m/assets/global/logos/social-facebook.svg" height="16">
                </a>
                <a class="px-1" href="https://twitter.com/Qualtrics/">
                    <img src="https://www.qualtrics.com/m/assets/global/logos/social-twitter.svg" height="16">
                </a>
                <a class="px-1" href="https://www.linkedin.com/company/qualtrics">
                    <img src="https://www.qualtrics.com/m/assets/global/logos/social-linkedin.svg" height="16">
                </a>
            </div>
            <li class="col-sm-6 col-lg mb-2 mb-lg-0"><a href="https://www.qualtrics.com/terms-of-service/"
                    rel="nofollow">Terms of
                    Service</a></li>
            <li class="col-sm-6 col-lg mb-2 mb-lg-0"><a href="https://www.qualtrics.com/privacy-statement/"
                    rel="nofollow">Privacy
                    Statement</a></li>
            <li class="col-sm-6 col-lg mb-2 mb-lg-0"><a href="https://www.qualtrics.com/security-statement/"
                    rel="nofollow">Security
                    Statement</a></li>
            <li class="col-sm-6 col-lg-1 mb-2 mb-lg-0"><a href="https://www.qualtrics.com/sitemap/"
                    rel="nofollow">Sitemap</a></li>
            </li>
            <li id="teconsent-holder" class="col-2 col-lg ">
        </div>
    </div>
</footer>
<div class="gradient-bar w-100" style=""></div>
                                                        
        <input id="csrftoken" type="hidden" value="eqyVEJyBoZoIMqPTtF6dR3JuqW5zQkGQStIaHR2072k"/>

<div data-preact="site-wide/index" class="" data-props="{}"><div></div></div>
        <script src='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/912.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/388.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/755.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/434.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/18.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/693.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/911.js'></script><script
                crossorigin='anonymous'
                src='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/preact-app.js'
                id='insided-preact-app'
                data-basepath='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/'
                data-environment='production'
                data-region='us-west-2'
                data-communityId='qualtrics-us'
                data-modules='["badges","reputation","unreadPostCounter","metadataPostDetails","ideation","subforumSubscription","emoji","mentions","channelConfiguration","pageConfiguration","conversationalWidget","fileAttachments","privateMessage","TopicSocialShare","webmasterManagement","nonModeratorsCanUploadImagesAndVideos","knowledgeBase","zendeskFederatedSearch","zendeskTicketEscalation","gainsight","event","eventEngagement","group","publicTagManagement","publicTagDestination","publicTagAutoSuggestion","integrationsApi","integrationsApps","userOverviewStatistics","rank","thirdPartyScripts","customCss","pointSystem","ideationV2","richTopicCards","analyticsV2","analyticsV2ProductFeedback","privateGroup","hiddenGroup","moderationOverviewBetaDefault","productAreas","emailCampaigns","imageResizingAndAlignment","convertQuestionsToIdeas","skilljarFederatedSearch","loginWithEmail","enableGroupTags","NewUICardGroupOverview","CommunityOverview","changeAuthorOfPublishedContent","thoughtIndustries","intercomFederatedSearch","intercomCreateConversations","gainsightPlatformSso","trackingEnabled","eventsCustomization","ccRebranding"]'
                data-userPermissions='{"readableCategories":[],"permissions":[]}'
                data-cssLink='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/css/forum.css'
                data-defaultCdn=''
                data-fb-app-id=''
                data-communityUrl='https://community.qualtrics.com'
                data-controlUrl='https://qualtrics-us.insided.com'
                data-eventLogger='https://t3t09eztsd.execute-api.us-west-2.amazonaws.com/v1/event'
                data-application='forum'
                data-cookieConfig='{"use_external_modal":false,"mapping":{"required":1,"anonymous":2,"all":3}}'
                data-defaultCookieLevel='1'
                nonce=''
                data-selectedCookieLevel='1'></script>
        <script src='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/912.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/755.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/729.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/18.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/911.js'></script><script src="https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/app.js" id="insided-app"  data-basepath="https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/js/" nonce="" data-environment="production" data-region="us-west-2" data-communityId="qualtrics-us" data-modules='["badges","reputation","unreadPostCounter","metadataPostDetails","ideation","subforumSubscription","emoji","mentions","channelConfiguration","pageConfiguration","conversationalWidget","fileAttachments","privateMessage","TopicSocialShare","webmasterManagement","nonModeratorsCanUploadImagesAndVideos","knowledgeBase","zendeskFederatedSearch","zendeskTicketEscalation","gainsight","event","eventEngagement","group","publicTagManagement","publicTagDestination","publicTagAutoSuggestion","integrationsApi","integrationsApps","userOverviewStatistics","rank","thirdPartyScripts","customCss","pointSystem","ideationV2","richTopicCards","analyticsV2","analyticsV2ProductFeedback","privateGroup","hiddenGroup","moderationOverviewBetaDefault","productAreas","emailCampaigns","imageResizingAndAlignment","convertQuestionsToIdeas","skilljarFederatedSearch","loginWithEmail","enableGroupTags","NewUICardGroupOverview","CommunityOverview","changeAuthorOfPublishedContent","thoughtIndustries","intercomFederatedSearch","intercomCreateConversations","gainsightPlatformSso","trackingEnabled","eventsCustomization","ccRebranding"]' data-cssLink='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/dist/css/forum.css' data-defaultCdn='https://dowpznhhyvkm4.cloudfront.net/2024-05-17-14-45-03-3f19809947/control/assets' data-fb-app-id='' data-language='en'></script><script nonce="">app.init([{"model":"csrf","data":{"name":"yip_csrf_token","token":"eqyVEJyBoZoIMqPTtF6dR3JuqW5zQkGQStIaHR2072k"}},{"el":"head","component":"google-analytics","data":{"tokens":[{"token":"UA-XXX","name":"insided","verification":""}],"privacyLevel":1,"nonce":""}},{"el":".js-ajax-form--registration","component":"ajax-form"},{"el":"#form--forgot__730044590","component":"ajax-form"},{"el":".js-open-modal","helper":"show-modal"},{"data":{"map":null,"breadcrumbData":[{"url":"\/","title":"XM Community"},{"url":"\/developer-corner-9","title":"Developer Corner"},{"url":"\/custom-code-12","title":"Custom Code"},{"url":"\/custom-code-12\/how-to-create-a-responsive-scroll-box-3327","title":"How to create a responsive scroll box?"}]},"component":"tracker"},{"el":"body","helper":"collapse"},{"el":"body","helper":"ajax-link"},{"model":"global_translations","data":{"ajax-form":{"connection_error":"Unable to submit form. Please refresh the page and try again."},"modal":{"close":"Close","loading":"Loading","gallery_previous":"Previous","gallery_next":"Next","gallery_counter":"%curr% of %total%","image_error":"The image could not be loaded","content_error":"The content could not be loaded"}}},{"view":"MainNavigation","el":".js-main-navigation"}]);</script>
        
        
    </main>