Hello,
I'm fairly to new to PollUnit/website design and trying to get embedding to work correctly. Currently, when my PollUnit is embedded there are two different scroll bars. One for the site page and another for the PollUnit itself. I've tried adjusting some of the settings with your guides, but noticed other issues if I set the PollUnit size to the page size. Mainly with previewing a picture that pop up window is then the size of the entire page. Any help/ideas on what I might be doing wrong? Thank you for your time.
We offer a feature to automatically adjust the iFrame size based on the content height. This can work well together with the disable_remote_overlay option. For more details, check out our tutorial here: Embedding a PollUnit.
However, my preferred approach is to set the iFrame height based on the viewport size. For instance, using height: 100vh; sets it to 100% of the user’s screen height. If your page has a header (e.g., 30px), you can dynamically subtract it using height: calc(100vh - 30px);. This way, the iFrame automatically resizes to fit the user’s screen perfectly.
Thank you for the reply Markus. Ok, I have only one scroll bar now, however, the PollUnit is getting cutoff 1/3 the way down of my page. I'm adding this to a SquareSpace site. Here is an example of my code snippet:
"<div style="overflow: hidden; width: 100vw; height: calc(100vh - 30px);">
"<iframe width="100%" height="100%"
"iframe frameborder="0" allowfullscreen allowtransparency="0"
"src="https://pollunit.com/polls/###?"embed=1&embed_options[kill_background]=1&embed_options[kill_title]=1"></iframe>
"<script src="https://pollunit.com/embed/iframeResizer.min.js"
" type="text/javascript">
"</script>
I've tried removing the resizer and that doesn't make a difference. Thank you for the help here.
You've wrapped the iFrame with a div which crops all content because you've added overflow hidden. That's why you see only one scrollbar. The idea behind the viewport solution is to avoid the main page scrollbar and only have a scrollbar in the iframe. If this is a suitable solution depends on you webpage.
Thank you Markus! The only thing this webpage will have is a header, footer, and the poll unit. I've removed the overflow hidden and now I have the main scrollbar, not the iframe one I believe. This isn't a bad solution, however, I've noticed on mobile that when I select a poll unit picture the pop up takes up the entire iframe with having to scroll a bunch to find the picture and to find the close. Is there something else I'm missing? As I said, I'm pretty new to this and really appreciate the help. Thank you again.
For this you can disable the remote overlays like described here: https://pollunit.com/en/tutorials/embed_poll
The remote overlay helped thank you. Only remaining issues I'm seeing is that when selecting a picture it doesn't show in my current view, I have to scroll up. I found this article from you guys, but I'm unsure where I would put that JavaScript code.
https://pollunit.com/en/questions/59/how-can-i-scroll-the-iframe-to-the-top-when-the-content-changes
Also, when I on mobile, if I select a picture and then close it, the page is blank. It doesn't refresh back to the main PollUnit page.
The best place to put the code is hard to tell without knowing your application. But it also should work if you put it right under the iframe in a script-tag.
I have no idea why you get a blank page. You may want to share your page with me at markus@pollunit.com.
