Responsive Embed of iFrame form | Experience Community
Skip to main content
JoseS
Administrator
1 year ago
Solved

Responsive Embed of iFrame form

  • Aug 16, 2018 7:18 PM UTC
  • 9 replies
  • 656 views
Looking to see if anyone has some bullet proof js or css method to get the qualtrics iframe embeds responsive. I'm able to adjust width to the display width without problem. It's the height that's the trouble. No scroll bars on iphone, safari. I appreciate the help.

Best answer by whicks1

This should get you most of the way. ##In the footer of "look and feel - advanced" ```javascript <script src="https://pym.nprapps.org/pym.v1.min.js"></script> <script> function renderWithTimeOut() { myVar = setTimeout(render, 4000); } function render() { pymChild.sendHeight(); } var pymChild = new pym.Child({ renderCallback: renderWithTimeOut }); </script> ``` ##From the "+ Add custom CSS" button ```css html { height: auto !important; } ``` ##On your HTML /parent page: ```html <div id="ELEMENT_ID"></div> ``` ```javascript <script src="https://pym.nprapps.org/pym.v1.min.js"></script> <script> var pymParent = new pym.Parent('ELEMENT_ID', 'URL_OF_QUALTRICS_FORM', {trackscroll: true}); </script> ```
View original

    9 replies

    NiC
    QPN Level 5 ●●●●●
    Forum|alt.badge.img+28
    • NiC
    • QPN Level 5 ●●●●●
    • Aug 17, 2018 3:50 PM UTC
    Hi @dfairbairn So " iphone , safari " do you mean on safari for desktop or is it the safari for iOS ?
    XM Engineer | Zill Consulting
    whicks1
    Level 1 ●
    Forum|alt.badge.img+2
    • whicks1
    • Level 1 ●
    • Aug 17, 2018 8:39 PM UTC
    I'm working on this same thing right now. Closest I've gotten so far is using NPR's http://blog.apps.npr.org/pym.js/. At this stage I can only get it to work with the 'blank' theme (others aren't picking up any height), which means that mobile styling ain't great out of the box, but otherwise, so far so good. Interested if anyone else has solutions. This should be documented better by the qualtrics folks in this day/age.
    whicks1
    Level 1 ●
    Forum|alt.badge.img+2
    • whicks1
    • Level 1 ●
    • Aug 17, 2018 8:48 PM UTC
    Scratch that. a little custom css to set html height to auto on any of the other look/feel templates (default to 100%) and we're gold it would seem. I can post some info below if you need a shortcut.
    • dfairbairn
    • Author
    • Aug 20, 2018 3:09 PM UTC
    I can basically estimate a height, which creates a scroll area on a web page. In iOS Safari however it doesn't give me a scroll bar, so the content is clipped and inaccessible. I haven't tried the pym.js. Mobile is the biggest issue at this point.
    • Anonymous
    • Aug 20, 2018 3:12 PM UTC
    Hello @dfairbairn , Please follow this stackoverflow thread https://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari
    whicks1
    Level 1 ●
    Forum|alt.badge.img+2
    • whicks1
    • Level 1 ●
    • Answer
    • Aug 20, 2018 3:30 PM UTC
    This should get you most of the way. ##In the footer of "look and feel - advanced" ```javascript <script src="https://pym.nprapps.org/pym.v1.min.js"></script> <script> function renderWithTimeOut() { myVar = setTimeout(render, 4000); } function render() { pymChild.sendHeight(); } var pymChild = new pym.Child({ renderCallback: renderWithTimeOut }); </script> ``` ##From the "+ Add custom CSS" button ```css html { height: auto !important; } ``` ##On your HTML /parent page: ```html <div id="ELEMENT_ID"></div> ``` ```javascript <script src="https://pym.nprapps.org/pym.v1.min.js"></script> <script> var pymParent = new pym.Parent('ELEMENT_ID', 'URL_OF_QUALTRICS_FORM', {trackscroll: true}); </script> ```
      whicks1
      Level 1 ●
      Forum|alt.badge.img+2
      • whicks1
      • Level 1 ●
      • Aug 20, 2018 3:33 PM UTC
      I should add, seems to preview fine on my iphone and scrollbars are a non issue since the height of the form is calculated for you. No idea about older browsers as my org does't support them anyway. Behind a firewall on dev so can't share public url unfortunately. Cheers, W
      sankeshkumar
      QPN Level 2 ●●
      Forum|alt.badge.img+1
      • sankeshkumar
      • QPN Level 2 ●●
      • Aug 20, 2018 10:40 PM UTC
      Hello @dfairbairn Go with the below mentioned CSS code @media only screen and (max-width: 480px) { .form-textarea, .form-textbox, .form-dropdown, .form-radio, .form-checkbox{ width: 100% !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-label-left, .form-label-right{ width: auto; } .form-buttons-wrapper{ margin-left:0 !important; } .form-input { width: 100%; } .form-all{ width: 98%; } .form-sub-label-container { width: 100%; display:block; }
        • dfairbairn
        • Author
        • Aug 21, 2018 12:38 PM UTC
        Thanks for the help, everyone. I'm testing various solutions now and will follow back up.
        Terms & ConditionsAccessibility statement