-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix iframe Answers Map/List toggle button on Mobile Error #1150
Conversation
Iframe needs height in order for map and toggle button to be initialized and to fill js-answersMap
static/js/iframe-common.js
Outdated
@@ -70,6 +70,8 @@ export function generateIFrame(domain, answersExperienceFrame) { | |||
iframe.frameBorder = 0; | |||
|
|||
// For dynamic iFrame sizing | |||
iframe.style.height = '100%'; | |||
iframe.style.minHeight = '100%'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm a little uncertain about this solution. There are a lot of potential problems with setting 100% height.
Can we take a look at this with a test across a few different browsers?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we should first look at upgrading iframe-resizer which is responsible for resizing the iframe to fill the view height. It's possible there is a bug there: https://www.npmjs.com/package/iframe-resizer
el.style.height = `${el.scrollHeight}px` | ||
} | ||
} | ||
//NOTE: set min-height for js-answersMap instead to prevent keyboard from shifting the page |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we don't need this code we can delete it instead of commenting it out
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! We can ignore the percy and browserstack errors since we don't use those services anymore
Iframe needs height in order for map and toggle button to be initialized and to fill js-answersMap