I need to remove the scrollbars in the Iframes Embed widget

  • enesco
    Asked on August 31, 2017 at 11:25 AM

    And, yes i need to remove the scrollbars in the Iframes. It my real question.

     

    Thx!

  • Jan
    Replied on August 31, 2017 at 11:26 AM

    Please give me more time to work on this issue. I will contact you once I have a solution. 

    Thank you for your patience.

  • enesco
    Replied on September 1, 2017 at 6:09 AM

    When i look at the generated code its like there is one Iframe embed in another.

    The iframe of the first level had a parameter scrolling="no" but not the second one. (thats the problem)

    I can edit the first level Iframe in the code, but i dont know where for the second.

     

    Sebastien

     

     

     

  • liyam
    Replied on September 1, 2017 at 8:30 AM

    Hello Sebastien,

    You can just go to the iframe code of your page (https://www.optimeo-prevention.com/images/ANIM_ERGO_SALUT/anim_ergo_salut.html) and then insert the scrolling="no" attribute and value.

    Once you have updated your iframe code there, the scrollbars should then go away.

    Thanks.

  • enesco
    Replied on September 1, 2017 at 9:36 AM

    Hello Liyam,

    There is no Iframe in this page. Here is the code :

    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>"Ergo salut" </title>
    <meta name="description" content="Animation">
    <meta name="ad.size" content="width=295,height=365">
    <style type="text/css">
    <script type="text/javascript" src="player.js">
    <script type="text/javascript">
    <style type="text/css" data-href="res/player.css">
    <style id="anm-player-styles">
    </head>
    <body class="no-iframe">
    <div id="target" class="no-iframe anm-wrapper anm-wrapper-target anm-state-playing" style="margin-left: -147px; width: 295px; margin-top: -399px; height: 365px;" anm-player="true">
    <canvas id="target-cvs" class="anm-player anm-player-target" style="outline: medium none; width: 295px; height: 365px;" width="295" height="365"></canvas>
    </div>
    <div id="anm-text-measurer-container">
    <span id="anm-text-measurer"></span>
    </div>
    </body>
    </html>
     
    Can't understand where this iframe embed in another iframe is generated.
     
    Thx,
     
    Sebastien
  • liyam
    Replied on September 1, 2017 at 10:55 AM

    I was informed by Jan that he's working on a solution for this concern. He will get back to this in a short while. 

  • Jan
    Replied on September 2, 2017 at 5:22 PM

    Thank you for patiently waiting.

    Unfortunately, I was not able to find a solution yet to hide the scrollbar of the embedded iFrame inside the widget. I understand that your webpage does not have an iFrame. It is actually the widget the creates another iFrame inside in order to embed your webpage.

    I have tried several CSS selectors like overflow, overflow-x, overflow-y in order to hide the scrollbar. I also tried adjusting the height of the iFrame. I also tried using the "Text" tool wherein I can put limited custom HTML but the issue is still the same. I already inserted the scrolling="no" tag in the text tool but it seems that the Form Builder is automatically stripping it.

    I also embedded your webpage on a simple HTML file and the issue is still the same. It means that your webpage has a script or a CSS that automatically creates a margin, padding or positioning in the wrapper of the canvas. Here's a screenshot:

    I need to remove the scrollbars in the Iframes Embed widget Image 1 Screenshot 30

    I believe you embedded this webpage to have an animation in the form. Actually, the form is intermittently lagging when I checked it in Google Chrome. It is because the widget is pulling up a lot of resources from that page that may result in slow performance.

    I suggest you use a screen recorder like LiceCap to record the animation and save it as a GIF file. In this way, you can position, resize and align it properly to your form. This will also increase the loading of the form. Here's an example of the recorded animation:

    I need to remove the scrollbars in the Iframes Embed widget Image 2 Screenshot 41

    You can save it if you like to. If that is not okay with you, then I will file a feature request ticket wherein the iFrame Embed widget should have a functionality to disable or enable the scrolling of the iFrame.

    Hope that helps. If you have any questions, let us know. 

  • enesco
    Replied on September 2, 2017 at 6:57 PM

    Hello, thank you for your reponse.

    * Ive also try multiples css selectors with no result...

    * Ive already tried to use custom iframe code, i can specify scrolling=no, but i have an issue, after the next button, the iframe was displaying nothing on Firefox browser (its why your support team recomand to use the iframe embed plugin)

    *Ive choose to display html5 instead of gif, because its lightweight. Gif of my animations are like 1,2Mo...and html5 animations are sharper (and the file is about 64ko).

    So, for the moment, i had two options, all with issues  : 

    1) Choose to embed my custom iframe, but i had to resolve the fact Firefox was displaying nothing after the Next button. (already opened a ticket about it)Maybe the more easy way. But dont really know where to begin to search... https://eu.jotform.com/answers/1234499-Firefox-not-displaying-Iframe-content-Html5-animations-#7

    2) Choose to use the embed plugin, but for now, as i cant override the second iframe, i cant prevent it to show scrollbars...

    I dont really see another option, if you have any idea...

    I also believe its will be good to modify the embed plugin to remove scrollbars from the second embed iframe.

    Thx,

    Sebastien

  • Mike
    Replied on September 2, 2017 at 7:30 PM

    Please do a test by adding overflow-x: hidden; overflow-y: hidden; styles to the body tag at optimeo-prevention.com/images/ANIM_ERGO_SALUT/anim_ergo_salut.html

    <body style="overflow-x: hidden; overflow-y: hidden; . . .

  • enesco
    Replied on September 3, 2017 at 6:18 AM

    Hello Mike,

    Thank you for your awnser, its working !

    Sebastien