How can I get rid of empty space to the right of my form when viewing through a Fancybox Lightbox?

  • Profile Image
    Asked on October 11, 2013 at 09:32 AM

    I've made my Jotform form 290px so it will show well right down to small screen width mobiles. I know you have a lightbox function, but I'm already using a Fancybox iframe for an upload form, so would rather stick to using Fancybox site-wide. I'm running JotForm locally rather than through embedds and your iframes.
    Problem is I keep getting a huge white space to the right of the form when it shows in the lightbox. I've scoured Fancybox source and css and don't see an issue. The problem looks like it's because of a JotForm <form>, but all sizes seem correct. 
    Have you experienced this before, or maybe have any idea of what's going on?
    My site is a fluid, responsive build so as I shrink the browser window the form and lightbox do shrink as you'd expect, and it doesn''t look bad on mobile widths, just a little extra space to the right, but any larger widths increase the space drastically.

    Any advice would be greatly appreciated. The site is running locally so I can't yet show you a working example, but hopefully you will see what I mean from the screenshot.


  • Profile Image
    Answered on October 11, 2013 at 10:08 AM

    Thanks for posting your concern here. Normally we would recommend using our iFrame embed method to prevent unexpected behaviours but like you said earlier, you are using Fancybox IFrame to embed it and running the JotForm source locally.

    What would I like to suggest is using a dual or proxy iFrame trick using a normal HTML iFrame code. It works like this:

    1. Create a blank HTML page.

    2. Use a normal iframe HTML to include where the JotForm source is located:

    <iframe src="//path-to-jotform-source-page"></iframe>

    3. Put the above HTML iFrame on the new page and save it.

    4. Using the Fancybox -iFrame method

    rather than linking it directly on the JotForm source page, link it to the new HTML page you created.

    The new HTML page would become a proxy to fetch the JotForm page. Please let us know if this works for you. Thanks


  • Profile Image
    Answered on October 11, 2013 at 10:27 AM

    Aaah good thinking ardy0689, I thought that would work, but it's had the opposite effect. It's gone much bigger.
    I used:
    <iframe src="generalcontact.html"frameborder="0" style="width:290px; height:610px; border:none;" scrolling="no"></iframe> So it has the dimensions.

    There's something else I'm going to try. I'm using Dreamweaver to build the site, but if I cheat a little and  nip over to Muse, you can easily change the page properties (dimensions in this case) So I'll try that and let you know how that goes.

  • Profile Image
    Answered on October 11, 2013 at 10:37 AM

    Hmmm. Ok using thhe Muse method looks a little better. Still excess space but at least the form in centralised.
    I'll keep trying anyway, thanks for your help.


  • Profile Image
    Answered on October 11, 2013 at 11:18 AM

    It's nice to know it looks much better now. Please let  us know if you need further assitance on this. It's a pleasure to assist you. 


  • Profile Image
    Answered on October 11, 2013 at 03:14 PM

    Cheers EliezerN the speed of support on here is top notch! :)

    For the sake of anyone else that might wind up being stuck with this, I haven't solved the fancybox lightbox width issue as yet, but for visual purposes I've put the form into a container div, and centered them both. So if the form is white for example, you could make the backgroud of the container div a different colour and make the div a little larger so it acts as a border(ish).

    Just a note, I did check out your lightbox option and it does the same. Space around the left and right sides. Though that may be intentional, I don't know.

    Here's my css for centering the form anyway :

    #form {
       width: 260px;
       height: 590px;
       margin: 0 auto 0 auto;

    It looks better to have equal space either side than to have the form float left and have all the space to the right. Thanks for your help :)

  • Profile Image
    dfg dfg df gdfg  
    Answered on November 04, 2014 at 05:47 AM

    gdfgdf fdg dfg dfg dfg dfg dfg dfgdfg dfg fdg dfg fdgfd dfg gdfg dfg dfg dfg dfg dfgdf gdf gdf