Can the iframe be more dynamic in terms of responsiveness?

edited September 2016 in Social Login
I have searched the forum before I posted this question, but could not find anything similar. But feel free to correct me.

I noticed that in the iframe (where all the social tiles are in) is using fixed dimensions - height and width. This makes the responsiveness of the html static instead of dynamic. On a desktop this is not much of an issue but on mobile devices, during switching the angle of the device, you can see that the size of the elements stay the same and that the social tiles will stick outside of the frame. Please see below. The first screenshot is the good one - before rotating device. Second screenshot is after rotating.

image

image

My question is: is it possible to make this more dynamic? I tried to overrule it through CSS but had no effect. Any advice or tips on this issue are welcome.

Answers

  • Hi,
    Yes, indeed.
    One way to customize the CSS (which otherwise gets downloaded from our servers) is to choose the option 'Use my own CSS file....', at app.oneall.com, which requires a basic plan (paid plan).

    Regards
  • Hello Fred,

    Maybe I should have added that piece of info as well... But I already did the thing you mentioned. I am already using my own CSS but cannot override the dimensions of the iframe. Is it possible?
  • Hi Daniel,

    Ah, sorry. For this you would need to use some Javascript (because the dimensions are inline !important).
    For example:
    window.onload = function () {
    var es = document.getElementsByTagName('iframe');
    es.namedItem('OneAll Social Login').style.cssText = 'height: 120px !important;';
    };
  • Hello Fred,

    Thank you for your help. But I noticed that the height of an iframe needs to be set at a fixed height? I have tested it and it appears that the height cannot be changed into percentages. The width can be made responsive so that is no problem. Only the height is a problem now... Any other advice?
  • Claude_SchlesserClaude_SchlesserAdministratorOneAll Team
    Hi Daniel,

    the iFrame computes itself the required height. It's not a hardcoded value, but generated by a script.

    Could you try to rotate the device and then refresh the screen. Are the icons then displayed correctly?
    No, this is not supposed the be the solution, just an information which helps me debugging ;)
  • Hello Claude,

    Thanks for your response and confirmation. Had the feeling it was script generated.

    That is what I meant with static responsiveness. If you hit refresh than all is good. Everything gets adjusted just fine. But it is not ideal when people are using a smartphone/tablet and decide to rotate device to get a better view of the application. And the average user does not think "Let's hit the refresh button" they will think "Mmmm... i think the software is broken". And I would like to avoid that if possible.

    Maybe it is an idea to use javascript to add resize actions at different resolutions. Like in CSS you use @media screen and (max-width: 1279px)?
  • It might not be the most ideal solution, but it works. The iframe is now responsive in a more dynamic way. If anyone has a better idea, please let me know. I am a bit new on the frontend development area so I can imagine that there are better ways to solve this.

    $( window ).resize(function() {

    $("iframe").css("width","100%");

    var mq = window.matchMedia( "(min-width:1200px)" );
    if (mq.matches) {
    $("iframe").css("height","280");
    }

    var mq = window.matchMedia( "(max-width:1199px)" );
    if (mq.matches) {
    $("iframe").css("height","380");
    }

    var mq = window.matchMedia( "(max-width:991px)" );
    if (mq.matches) {
    $("iframe").css("height","180");
    }

    var mq = window.matchMedia( "(max-width:768px)" );
    if (mq.matches) {
    $("iframe").css("height","280");
    }

    var mq = window.matchMedia( "(max-width:597px)" );
    if (mq.matches) {
    $("iframe").css("height","280");
    }

    var mq = window.matchMedia( "(max-width:506px)" );
    if (mq.matches) {
    $("iframe").css("height","480");
    }

    var mq = window.matchMedia( "(max-width:378px)" );
    if (mq.matches) {
    $("iframe").css("height","580");
    }

    });

Welcome!

Please sign in to your OneAll account to ask a new question or to contribute to the discussions.

Please click on the link below to connect to the forum with your OneAll account.