Problem with Web Form Builder - Popup
I have an issue with a popup form generated with the form-builder. The generated code isn't working on Safari or on Chrome. IE and Firefox is ok.
The generated popup-window setup is incorrect. The first line generated after fireing up the popup is:
< div id="colorbox" class="" style="padding-bottom: 137px; padding-right: 44px; top: 393px; left: 624px; position: fixed; overflow: hidden; width: 400px; height: 335px;" >
It seems the tag "overflow: hidden;" is the trouble maker. If I disable it manually or set it to "inherit" everything works fine.
I tried to find out where this special line is assembled (within jquery.colorbox.js ?) but I couldn't find it (must say my programming skill is basic).
Does somebody has an idea how to fix this issue? Thx.
The generated popup-window setup is incorrect. The first line generated after fireing up the popup is:
< div id="colorbox" class="" style="padding-bottom: 137px; padding-right: 44px; top: 393px; left: 624px; position: fixed; overflow: hidden; width: 400px; height: 335px;" >
It seems the tag "overflow: hidden;" is the trouble maker. If I disable it manually or set it to "inherit" everything works fine.
I tried to find out where this special line is assembled (within jquery.colorbox.js ?) but I couldn't find it (must say my programming skill is basic).
Does somebody has an idea how to fix this issue? Thx.
What is the URL to the form?
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
You can test it, if you go to this webside http://guten-morgen-kunde.de/immoting/webseite/index.html and click "wir rufen zurück" (translated: we are calling back) on the very left top.
At first glance, I don't show that you are using the <iframe> markup the software gives. It has been modified.
If you want to use your own markup, make sure to include height and width dimensions as well.
<a class='fb_iframe' href="./immoting-rueckruf/immoting-rueckruf.html"><i class="fa fa-phone"></i> Wir rufen zurück</a>
If you want to use your own markup, make sure to include height and width dimensions as well.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
Hi, you should know you own software better
The mentioned attributes are defined in the script which has to be published in the header:
<script>
var $fb_pop = jQuery.noConflict();
$fb_pop(document).ready(function(){
$fb_pop(".fb_iframe").colorbox({iframe:true, innerWidth:"400px", height:"80%", maxHeight:"472px", fixed:true });
});
</script>
I have used the code as Form Builder told me to do...

<script>
var $fb_pop = jQuery.noConflict();
$fb_pop(document).ready(function(){
$fb_pop(".fb_iframe").colorbox({iframe:true, innerWidth:"400px", height:"80%", maxHeight:"472px", fixed:true });
});
</script>
I have used the code as Form Builder told me to do...
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.