0

I have a page which contains a script tag which pulls in a survey form from JotForm. Basically placing a tag in the HTML pulls in content from the 3rd party, which is a form. The code pulled in is a full page ie: contains html element which contains an iframe.

The problem is that there is a class called form-all which has a width set at 690 which does not fit in our site, it's too wide so cuts off.

I need to know how I can remove this width on the form-all class from my html code?

The structure would be something like:

<html> <!-- My html element //-->
 ...
 ...

   <html> <!-- html element pulled in from 3rd party code, everything within is 3rd party //-->
     <iframe>
        <div class='form-all'>

        </div>
     </iframe>
   </html>

</html>

How do I remove the width on form-all by placing code in my code which I control?

Thanks.

KDee
  • 684
  • 3
  • 9
  • 25
  • 1
    Sorry, you can't. IFrames are out of bounds of both JavaScript (security reasons) and CSS (isolation). This can be breached through cross site scripting, but that will not quite work when the IFrame is supplied by a 3rd party. – Luaan Dec 19 '13 at 17:02
  • Try to see if JotForm has options to change the width, or if they allow you to add custom CSS. – thirtydot Dec 19 '13 at 17:23
  • You need javascript in your document loaded via Iframe. Then , from there, the document loaded can look into parent.window for a script or CSS values. – G-Cyrillus Dec 19 '13 at 17:41

1 Answers1

1

jquery:

$("#iFrame").contents().find("#someDiv").removeClass("form-all");

source

Community
  • 1
  • 1
Facundo Colombier
  • 3,487
  • 1
  • 34
  • 40