Best answer by whicks1
View original
Responsive Embed of iFrame form
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.
Userlevel 7
+27
Hi @dfairbairn
So " iphone , safari " do you mean on safari for desktop or is it the safari for iOS ?
So " iphone , safari " do you mean on safari for desktop or is it the safari for iOS ?
+2
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.
+2
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.
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.
A
Hello @dfairbairn ,
Please follow this stackoverflow thread
https://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari
Please follow this stackoverflow thread
https://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari
+2
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>
```
##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>
```
+2
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
Cheers,
W
Userlevel 3
+1
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;
}
@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;
}
Thanks for the help, everyone. I'm testing various solutions now and will follow back up.
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.