• Register
  • Login
  • Pricing
  • Support
    • Support
    • Tutorials
    • Blog
    • Guide
    • Support Forum
  • Notification Settings Notification Settings
  • Private Messages Private Messages
  • All Messageboards
  • Bugs

Mobile embed: requirement to login appears in the middle

Started 2019-05-10 by Paulius Bakutis

Paulius Bakutis

2019-05-10

We use picture voting and in mobile version embed it extends in a high column. When I press the vote, the login screen jumps to the middle, covering the voting options and it's not seen. The only way to see it is to scroll to the middle of embeded voting screen. Check this: https://www.visitbirstonas.lt/index.php?module=editable&action=separated&id=422

Markus Huber

2019-05-10

Hi Paulius!
We'll look into it and get back to you!

Markus Huber

2019-06-08

Hi Paulius!

Sorry it took a little longer. Since some of our users integrate our polls screen filling, we couldn't easily rebuild it.

But now there is the option to deactivate the centered overlay. The iFrame will then automatically be resized to the size of the overlay. This requires the iFrameResize() Script.

You need to add &embed_options[disable_remote_overlay]=1 to your poll link.
Take a look at: https://pollunit.com/tutorials/embed_poll (Almost at the end of the tutorial)

When the iframe will be loaded you can bind functions on this event. For example you could do something like this with jQuery to scroll your page to the iframe when the iFrame contents change.

$('iframe').load(function() {
  $('html, body').animate({ scrollTop: ($('iframe').offset().top) }, 'slow');
});

Another solution would be to set the height of the iFrame to 100vh. vh units representing a percentage of the current viewport height. By setting the iFrame via css to 100vh the iframe always fit to the users display. As stated before, many of our clients use embedded polls screen filling. The CSS would look like this:

iframe {
  width: 100vw;
  height: 100vh;
}

Your page has a fixed header. So you could also substract the header height from the 100vh.

iframe {
  width: 100vw;
  height: 100vh;
  height: calc(100vh - *YourPersonalHeaderHeightInPx*);
}

I hope this will help you!

Tools

  • Voting
  • Surveys
  • Free Tables
  • Collect Ideas and Feedback
  • Photo Contests
  • Video Contests
  • Music Contests
  • Landing Page
  • Pairwise Comparison
  • PollUnit Lab

Support

  • Get Started
  • PollUnit Help
  • Tutorials
  • Support Forum
  • support@pollunit.com

Tutorials

  • Create your first poll
  • Advanced poll features
  • Advanced survey branching logic
  • Distribute tasks online
  • Cast votes and rate options
  • Find a date
  • Vote on images
  • Create your own theme
  • Polls with your own logo
  • Evaluate your PollUnit
  • Dot Voting
  • Range Voting
  • Polls on your own website
  • Live Voting
  • Reach a consensus
  • Manage orga­nizations
  • Prevent multiple participation
  • Donations and participation fees

Legal

  • Privacy policy
  • Terms of use
  • Imprint

PollUnit

  • PollUnit Blog
  • About PollUnit
  • Press kit
  • © PollUnit
  • Register
  • Login
  • Pricing
  • Support
    • Support
    • Tutorials
    • Blog
    • Guide
    • Support Forum