Can the iframe be more dynamic in terms of responsiveness?

Answers

• Fred_PinelMember

  September 2016

  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
• Daniel_RoqueMember

  September 2016

  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?
• Fred_PinelMember

  September 2016

  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;';
  };
• Daniel_RoqueMember

  October 2016

  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_SchlesserAdministratorOneAll Team

  October 2016

  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
• Daniel_RoqueMember

  October 2016

  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)?
• Daniel_RoqueMember

  October 2016

  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");
  }
  
  });