How to create a responsive scroll box?

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

!

Page 1 / 1

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).

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

@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

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

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>
            <hr class="seperator m-b-0 ">
    </div>                                                    <div class="post box__pad qa-topic-post-box" data-helper="gallery" data-data='{"delegate": "img:not([src*=\"emojione\"]), a.fancybox img", "type": "image"}'>
    <body><p><a href="https://community.qualtrics.com/XMcommunity/discussion/comment/54820#Comment_54820">https://community.qualtrics.com/XMcommunity/discussion/comment/54820#Comment_54820</a>Thank you.<br></p></body>
            <hr class="seperator m-b-0 ">
    </div>                                            </div>
                </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" aria-label="Powered by Gainsight"><span class="is-hidden">Powered by Gainsight</span></a></div><div class="templatefoot-privacy-links"><a href="/site/terms" aria-label="Terms & Conditions">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" aria-label="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>
    
    
    
    
    
    
            <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>

<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="a3ao5Rl76FNQ07VsUCqiCMIwyeNaRnWs41MMWKUjF_Q" />
</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 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>

<div data-preact="site-wide/index" class="" data-props="{}"><div></div></div>
        <div data-preact="multi-language/index" data-props='{"ssoLoginUrl":"\/ssoproxy\/login?ssoType=openidconnect","loginPhrase":"Login"}'></div>
        <script src='https://dowpznhhyvkm4.cloudfront.net/2025-03-28-13-13-05-2dd4a92b7b/dist/js/206.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2025-03-28-13-13-05-2dd4a92b7b/dist/js/659.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2025-03-28-13-13-05-2dd4a92b7b/dist/js/857.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2025-03-28-13-13-05-2dd4a92b7b/dist/js/618.js'></script><script
                crossorigin='anonymous'
                src='https://dowpznhhyvkm4.cloudfront.net/2025-03-28-13-13-05-2dd4a92b7b/dist/js/preact-app.js'
                id='insided-preact-app'
                data-basepath='https://dowpznhhyvkm4.cloudfront.net/2025-03-28-13-13-05-2dd4a92b7b/dist/js/'
                data-environment='production'
                data-region='us-west-2'
                data-communityId='qualtrics-us'
                data-modules='["badges","reputation","unreadPostCounter","metadataPostDetails","ideation","subforumSubscription","mentions","rateLimiting","privateMessage","TopicSocialShare","fileAttachments","channelConfiguration","pageConfiguration","webmasterManagement","nonModeratorsCanUploadImagesAndVideos","knowledgeBase","event","eventEngagement","publicTagManagement","publicTagAutoSuggestion","publicTagDestination","integrationsApi","integrationsApps","userOverviewStatistics","rank","zendeskFederatedSearch","zendeskTicketEscalation","thirdPartyScripts","customCss","pointSystem","ideationV2","analyticsV2","analyticsV2ProductFeedback","privateGroup","moderationOverviewBetaDefault","emailCampaigns","imageResizingAndAlignment","richTopicCards","productAreas","convertQuestionsToIdeas","skilljarFederatedSearch","loginWithEmail","hiddenGroup","NewUICardGroupOverview","enableGroupTags","CommunityOverview","changeAuthorOfPublishedContent","thoughtIndustries","intercomFederatedSearch","intercomCreateConversations","aiFeaturesForCM","aiFeatures","trackingEnabled","ccRebranding","contentInPreferredLanguage","biToolsConnector","widgetSiteIdentity","eventSubscriptions","aiFeedback","customizationSettings","multiLanguage","platformVisibility","experimentalFeatures","userRoles","userProfileFields","userProfileOverview","userGroups","registrationRules","topicsCreate","moderationHome","moderationOverview","draftContent","spamContent","systemEmails","emailSuppression","userOverview","userSegments","analyticsMetadata","analyticsExport","translations","widgetsSettings","selfServiceSSO","customPages","contentHelpfulness","moderationLabels","metadataSettings","automationRules","preModerationRules","moderationNotifications","spamPrevention","seoManagement","categorySettings","allowCdnCaching","localizedHomepage","haCookielessAuth","adminSeats","articleScheduling","controlSideMenu","conversationalWidget","destinationCustomization","emailTemplate","emoji","group","selfBadges","selfServiceSso","subtitleAndBackgroundToWidgets","teamNotes","zapier","gainsight","gainsightPlatformSso","eventsCustomization","notificationCenter","inAppNotifications"]'
                data-userPermissions='{"readableCategories":[],"permissions":[]}'
                data-cssLink='https://dowpznhhyvkm4.cloudfront.net/2025-03-28-13-13-05-2dd4a92b7b/dist/css/preact-app.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-search='{"client_id":"2BDID0VSM6","token":"MzhmMjQ4ZjQ3MDRlNmM0MDY5N2M5ODY1ZmJlOTI1ZWViZjVhNjUwNzcyZGY3Mjc0NDI3Y2JhZGM1NmFkNjJlY2ZpbHRlcnM9Zm9ydW0lM0ErMTArT1IrZm9ydW0lM0ErMTAwK09SK2ZvcnVtJTNBKzExK09SK2ZvcnVtJTNBKzExMitPUitmb3J1bSUzQSsxMTUrT1IrZm9ydW0lM0ErMTE3K09SK2ZvcnVtJTNBKzExOStPUitmb3J1bSUzQSsxMitPUitmb3J1bSUzQSsxMjArT1IrZm9ydW0lM0ErMTMrT1IrZm9ydW0lM0ErMTM5K09SK2ZvcnVtJTNBKzE0MCtPUitmb3J1bSUzQSsxOCtPUitmb3J1bSUzQSsxOStPUitmb3J1bSUzQSsyK09SK2ZvcnVtJTNBKzMrT1IrZm9ydW0lM0ErNCtPUitmb3J1bSUzQSs1MitPUitmb3J1bSUzQSs1NCtPUitmb3J1bSUzQSs1NitPUitmb3J1bSUzQSs1OCtPUitmb3J1bSUzQSs2MitPUitmb3J1bSUzQSs2NCtPUitmb3J1bSUzQSs2NitPUitmb3J1bSUzQSs2OCtPUitmb3J1bSUzQSs3NytPUitmb3J1bSUzQSs3OCtPUitmb3J1bSUzQSs3OStPUitmb3J1bSUzQSs4K09SK2ZvcnVtJTNBKzgwK09SK2ZvcnVtJTNBKzgxK09SK2ZvcnVtJTNBKzgyK09SK2ZvcnVtJTNBKzgzK09SK2ZvcnVtJTNBKzg1K09SK2ZvcnVtJTNBKzkwK09SK2ZvcnVtJTNBKzkxK09SK2ZvcnVtJTNBKzkyK09SK2ZvcnVtJTNBKzkzK09SK2ZvcnVtJTNBKzk0K09SK2ZvcnVtJTNBKzk1K09SK2ZvcnVtJTNBKzk2K09SK2ZvcnVtJTNBKzk5K09SK2ZvcnVtJTNBKzcxK09SK2ZvcnVtJTNBKzEyNytPUitmb3J1bSUzQSsxMjgrT1IrZm9ydW0lM0ErMTI5K09SK2ZvcnVtJTNBKzEzMCtPUitmb3J1bSUzQSsxMzErT1IrZm9ydW0lM0ErMTMyK09SK2ZvcnVtJTNBKzEzMytPUitmb3J1bSUzQSsxMzQrT1IrZm9ydW0lM0ErMTM1K09SK3B1YmxpY19yZWNvcmQlM0F0cnVlJnJlc3RyaWN0SW5kaWNlcz1xdWFsdHJpY3MtdXMlMkEmcXVlcnlMYW5ndWFnZXM9JTVCJTIyZW4lMjIlNUQmdmFsaWRVbnRpbD0xNzQzMzQ3ODc2","basicToken":"NTUyNzkwNDNlMWFhMTc1NWQ0NDQxNWMzMDQyYzJkMjlkYWEyZGUxZWUyM2UxY2I0NWQ3NWRiNDgwMzkyZTA3NGZpbHRlcnM9cHVibGljX3JlY29yZCUzQXRydWUmcmVzdHJpY3RJbmRpY2VzPXF1YWx0cmljcy11cyUyQSZxdWVyeUxhbmd1YWdlcz0lNUIlMjJlbiUyMiU1RCZ2YWxpZFVudGlsPTE3NDMzNDc4NzY=","isZendeskFederatedSearchEnabled":false,"hiddenCategories":[]}'
                data-selectedCookieLevel='1'></script>
        <script src='https://dowpznhhyvkm4.cloudfront.net/2025-03-28-13-13-05-2dd4a92b7b/dist/js/206.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2025-03-28-13-13-05-2dd4a92b7b/dist/js/729.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2025-03-28-13-13-05-2dd4a92b7b/dist/js/857.js'></script><script src="https://dowpznhhyvkm4.cloudfront.net/2025-03-28-13-13-05-2dd4a92b7b/dist/js/app.js" id="insided-app"  data-basepath="https://dowpznhhyvkm4.cloudfront.net/2025-03-28-13-13-05-2dd4a92b7b/dist/js/" nonce="" data-environment="production" data-region="us-west-2" data-communityId="qualtrics-us" data-modules='["badges","reputation","unreadPostCounter","metadataPostDetails","ideation","subforumSubscription","mentions","rateLimiting","privateMessage","TopicSocialShare","fileAttachments","channelConfiguration","pageConfiguration","webmasterManagement","nonModeratorsCanUploadImagesAndVideos","knowledgeBase","event","eventEngagement","publicTagManagement","publicTagAutoSuggestion","publicTagDestination","integrationsApi","integrationsApps","userOverviewStatistics","rank","zendeskFederatedSearch","zendeskTicketEscalation","thirdPartyScripts","customCss","pointSystem","ideationV2","analyticsV2","analyticsV2ProductFeedback","privateGroup","moderationOverviewBetaDefault","emailCampaigns","imageResizingAndAlignment","richTopicCards","productAreas","convertQuestionsToIdeas","skilljarFederatedSearch","loginWithEmail","hiddenGroup","NewUICardGroupOverview","enableGroupTags","CommunityOverview","changeAuthorOfPublishedContent","thoughtIndustries","intercomFederatedSearch","intercomCreateConversations","aiFeaturesForCM","aiFeatures","trackingEnabled","ccRebranding","contentInPreferredLanguage","biToolsConnector","widgetSiteIdentity","eventSubscriptions","aiFeedback","customizationSettings","multiLanguage","platformVisibility","experimentalFeatures","userRoles","userProfileFields","userProfileOverview","userGroups","registrationRules","topicsCreate","moderationHome","moderationOverview","draftContent","spamContent","systemEmails","emailSuppression","userOverview","userSegments","analyticsMetadata","analyticsExport","translations","widgetsSettings","selfServiceSSO","customPages","contentHelpfulness","moderationLabels","metadataSettings","automationRules","preModerationRules","moderationNotifications","spamPrevention","seoManagement","categorySettings","allowCdnCaching","localizedHomepage","haCookielessAuth","adminSeats","articleScheduling","controlSideMenu","conversationalWidget","destinationCustomization","emailTemplate","emoji","group","selfBadges","selfServiceSso","subtitleAndBackgroundToWidgets","teamNotes","zapier","gainsight","gainsightPlatformSso","eventsCustomization","notificationCenter","inAppNotifications"]' data-cssLink='https://dowpznhhyvkm4.cloudfront.net/2025-03-28-13-13-05-2dd4a92b7b/dist/css/preact-app.css' data-defaultCdn='https://dowpznhhyvkm4.cloudfront.net/2025-03-28-13-13-05-2dd4a92b7b/control/assets' data-fb-app-id='' data-language='en'></script><script nonce="">app.init([{"model":"csrf","data":{"name":"yip_csrf_token","token":"fBID8CL3cls53OJUZMWF60qTsuK1Ee43B2UyuHOYrJs"}},{"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__2142857877","component":"ajax-form"},{"el":".js-open-modal","helper":"show-modal"},{"data":{"map":null,"breadcrumbData":[{"title":"XM Community","url":"\/"},{"title":"Developer Corner","url":"\/developer-corner-9"},{"title":"Custom Code","url":"\/custom-code-12"},{"title":"How to create a responsive scroll box?","url":"\/custom-code-12\/how-to-create-a-responsive-scroll-box-3327"}]},"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>