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

<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="9V1Q30buiOOy50ECmToxfKzb9QEP_V6A0CicaQDOaLc" />
</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?postid=53256","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":null,"source_id":null,"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>
        <script>
    class CustomerEducationElement extends HTMLElement {
        constructor() {
            super();
            // Attach a shadow DOM with mode 'open'
            this.attachShadow({ mode: 'open' });
        }

// Watch for changes in these attributes
        static get observedAttributes() {
            return ['data-config'];
        }

attributeChangedCallback(name, oldValue, newValue) {
            if(oldValue && oldValue !== newValue) {
                this.updateDesignTokens(newValue);
            }
        }

connectedCallback() {
            this.render();
        }

render() {
            try{
                const _templateId = this.getAttribute('data-template-id');
                // Get the template content
                const template = document.getElementById(_templateId);
                this.shadowRoot.appendChild(template.content.cloneNode(true));

this.updateDesignTokens(this.getAttribute('data-config'));
            } catch(error){
                console.error(`Failed to render CE widget template ${_templateId}`, error);
            }
        }

updateDesignTokens(config) {
            config = this.parseConfig(config);

if(config) {
                const styles = {
                    '--np-button-color': config['--config-button-cta-background-color'],
                    '--np-button-hover-color': config['--config-button-cta-hover-background-color'],
                    '--np-button-font-color': config['--config-button-cta-color'],
                    '--np-header-color': config['--config-header-color'],
                    '--np-header-font-color': config['--config-header-color'],
                    '--np-header-font-hover-color': config['--config-anchor-base-color'],
                    '--np-learning-header-color': config['--config-header-color'],
                    '--np-learning-header-font-color': config['--config-header-color'],
                    '--np-learning-header-font-hover-color': config['--config-anchor-base-color'],
                    '--np-learning-link-button-color': config['--np-learning-link-button-color'],
                    '--np-learning-progress-bar-color': config['--config--main-color-brand']
                };

for (const [property, value] of Object.entries(styles)) {
                    this.shadowRoot.host.style.setProperty(property, value);
                }
            }
        }

parseConfig(config) {
            try {
                return JSON.parse(config);
            } catch (error) {
                console.error(`Failed to parse the Branding config`, error);
            }
        }
    }

customElements.define('customer-education-element', CustomerEducationElement);
</script>
        
        
        
        
                                                                                                    
    <div class="ssi ssi-footer custom-footer">
                    


<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>
            </div>
                                                        
        <input id="csrftoken" type="hidden" value="nLVdrHtQ0gN0eS50tPoqlUL6ibxpbUwyhj7ih6-AKo8"/>

<div data-preact="site-wide/index" class="" data-props="{}"><div></div></div>
                <script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/dist/js/600.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/dist/js/498.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/dist/js/755.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/dist/js/359.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/dist/js/18.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/dist/js/74.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/dist/js/911.js'></script><script
                crossorigin='anonymous'
                src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/dist/js/preact-app.js'
                id='insided-preact-app'
                data-basepath='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/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","categoriesV2","categoriesConfig","categoriesV2ConfigCommunity","categoriesV2Community","trackingEnabled","notificationCenter","categoriesV2Destination","ccRebranding","widgetSiteIdentity","eventSubscriptions","aiFeedback","customizationSettings","adminSeats","articleScheduling","controlSideMenu","conversationalWidget","customPages","destinationCustomization","emailTemplate","emoji","group","selfBadges","selfServiceSso","subtitleAndBackgroundToWidgets","teamNotes","zapier","userSegments","gainsight","gainsightPlatformSso","eventsCustomization"]'
                data-userPermissions='{"readableCategories":[],"permissions":[]}'
                data-cssLink='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/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-search='{"client_id":"IC23ZXNZKT","token":"MDExOGFjNjU3MGI1NzNlZTU5NzJmM2I4ZmVkN2NlMTRmZjI5OTIxNzFiZmMzZTcyY2IwNWRmMWM3NWZmMTgxYmZpbHRlcnM9Zm9ydW0lM0ErMTArT1IrZm9ydW0lM0ErMTAwK09SK2ZvcnVtJTNBKzExK09SK2ZvcnVtJTNBKzEyK09SK2ZvcnVtJTNBKzEzK09SK2ZvcnVtJTNBKzE4K09SK2ZvcnVtJTNBKzE5K09SK2ZvcnVtJTNBKzIrT1IrZm9ydW0lM0ErMytPUitmb3J1bSUzQSs0K09SK2ZvcnVtJTNBKzUyK09SK2ZvcnVtJTNBKzU0K09SK2ZvcnVtJTNBKzU2K09SK2ZvcnVtJTNBKzU4K09SK2ZvcnVtJTNBKzYyK09SK2ZvcnVtJTNBKzY0K09SK2ZvcnVtJTNBKzY2K09SK2ZvcnVtJTNBKzY4K09SK2ZvcnVtJTNBKzc3K09SK2ZvcnVtJTNBKzc4K09SK2ZvcnVtJTNBKzc5K09SK2ZvcnVtJTNBKzgrT1IrZm9ydW0lM0ErODArT1IrZm9ydW0lM0ErODErT1IrZm9ydW0lM0ErODIrT1IrZm9ydW0lM0ErODMrT1IrZm9ydW0lM0ErODUrT1IrZm9ydW0lM0ErOTArT1IrZm9ydW0lM0ErOTErT1IrZm9ydW0lM0ErOTIrT1IrZm9ydW0lM0ErOTMrT1IrZm9ydW0lM0ErOTQrT1IrZm9ydW0lM0ErOTUrT1IrZm9ydW0lM0ErOTYrT1IrZm9ydW0lM0ErOTkrT1IrZm9ydW0lM0ErNzErT1IrcHVibGljX3JlY29yZCUzQXRydWUmcmVzdHJpY3RJbmRpY2VzPXF1YWx0cmljcy11cyUyQSZxdWVyeUxhbmd1YWdlcz0lNUIlMjJlbiUyMiU1RCZ2YWxpZFVudGlsPTE3MzI1MjYzMDM=","basicToken":"YjUxZDJlMzBkYjBjZGQyZmQwOTdkMDk3NTNjNGUwYzU2MDI0NTQwNGUyYTBmYTViZGYyODY4NTExN2UyNjAxY2ZpbHRlcnM9cHVibGljX3JlY29yZCUzQXRydWUmcmVzdHJpY3RJbmRpY2VzPXF1YWx0cmljcy11cyUyQSZxdWVyeUxhbmd1YWdlcz0lNUIlMjJlbiUyMiU1RCZ2YWxpZFVudGlsPTE3MzI1MjYzMDM=","isZendeskFederatedSearchEnabled":false,"hiddenCategories":[]}'
                data-selectedCookieLevel='1'></script>
        <script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/dist/js/600.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/dist/js/755.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/dist/js/729.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/dist/js/18.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/dist/js/911.js'></script><script src="https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/dist/js/app.js" id="insided-app"  data-basepath="https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/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","categoriesV2","categoriesConfig","categoriesV2ConfigCommunity","categoriesV2Community","trackingEnabled","notificationCenter","categoriesV2Destination","ccRebranding","widgetSiteIdentity","eventSubscriptions","aiFeedback","customizationSettings","adminSeats","articleScheduling","controlSideMenu","conversationalWidget","customPages","destinationCustomization","emailTemplate","emoji","group","selfBadges","selfServiceSso","subtitleAndBackgroundToWidgets","teamNotes","zapier","userSegments","gainsight","gainsightPlatformSso","eventsCustomization"]' data-cssLink='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/dist/css/forum.css' data-defaultCdn='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-07-32-21-69ada06a5e/control/assets' data-fb-app-id='' data-language='en'></script><script nonce="">app.init([{"model":"csrf","data":{"name":"yip_csrf_token","token":"nLVdrHtQ0gN0eS50tPoqlUL6ibxpbUwyhj7ih6-AKo8"}},{"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__2142711373","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>