Installed Form as FB App (not iframe); can't get scrollbars to disappear

  • Profile Image
    redletterpr
    Asked on October 18, 2011 at 04:47 PM

    Hi, I've installed my JotForm form as an application on Facebook. Now, I can't get the scroll bars to disappear. I'm not sure if it's the length causing it or what. However, I've tried setting the width to 520 and 500, but nothing.


    Here's the tab - https://www.facebook.com/pages/RL-Social/147189092030727?sk=app_179366562146247

     

    Any help would be greatly appreciated. Thanks for your time and assistance.

  • Profile Image
    fxr
    Answered on October 18, 2011 at 04:53 PM

    hey.

    Can you tell me which method you used to embed the form on facebook? 

  • Profile Image
    redletterpr
    Answered on October 18, 2011 at 05:12 PM

    Hi, thanks for the prompt response. I'm not sure what the process is called, but I created a new Facebook Application and provided canvas URL, secure URL, Tab URL, etc. Then, I added the app to my  page. Does that help?

  • Profile Image
    idarktech
    Answered on October 18, 2011 at 07:06 PM

    Hi,

    Could you please recheck your app settings maybe it has some "Show Scrollbar" or "Autoresize"  option, you should choose autoresize for that. For the horizontal scrollbar try reducing your form width so it would fit exactly on your FB page.

    You can also visit our guide on how to add form in Facebook which may give you some tips on embedding your form to facebook, check it here.

    Let us know if this doesn't help so we can assist you more.

    ~idarktech

  • Profile Image
    fxr
    Answered on October 18, 2011 at 07:17 PM

    There is a also setting for fluid widths in the facebook app settings, you could try.

     

    Redletterpr, can you tell me the settings you used under Page Tab in facebook?

     

     

    Our documentation at http://www.jotform.com/answers/16013-How-to-use-JotForm-using-new-Facebook-Developer-application is out of date and needs updated. I have tried a million things and just cant figure it out.

     We need to update the documentation & your help would be greatly appreciated. 

  • Profile Image
    redletterpr
    Answered on October 18, 2011 at 07:41 PM

    This is what I'm seeing:

     

  • Profile Image
    fxr
    Answered on October 18, 2011 at 07:54 PM

    yeah. I just got it.

    Seems you dont need anything in there at all. 

    I just needed to put www.jotform.com into the website section. 

    Its a much better way to embed JotForm forms into Facebook than the more commonly used TabPress method. Allows for better user  customization. Thanks for bringing it to our attention. I will create a new User Guide entry for it later this week. 

     

    Now onto your issue:

    See if you go to Preferences -> Form Styles -> Inject Custom CSS and put in 

    body {overflow-x:hidden; } 

    That should sort your scrollbar issue out.

  • Profile Image
    redletterpr
    Answered on October 19, 2011 at 11:58 AM

    Hi  fxr, thanks for looking into this. I added the CSS you recommended. It removed the horizontal scrollbar. Is there a way to also remove the vertical scroll bar to show the full length of the height of the page?

  • Profile Image
    fxr
    Answered on October 19, 2011 at 05:13 PM

    Thats gonna be a facebook setting. Theres nothing you can with CSS on your JotForm to change how much height is given by facebook for your form.

    I had a look on facebooks' app settings and all they seem to have height related is :

     

     

    I tried both with no real difference made.

     

    Anyway, your form looks great on Facebook and functions well in my opinion. 

  • Profile Image
    redletterpr
    Answered on October 19, 2011 at 05:25 PM

    Ok. Thanks again for your help. I appreciate it. Your support has been great!

  • Profile Image
    fxr
    Answered on October 19, 2011 at 05:45 PM

    No worries. You helped is out too pointing out the usefulness of this method for embedding forms on Facebook.

    A thought has occured to me, you could experiment with the Page Break tool

    With Previous & Next at the bottom of each 'page' of your form. Might take a little work working out exactly what height you have to work with on each page tho.

  • Profile Image
    redletterpr
    Answered on October 26, 2011 at 12:00 PM

    Btw, just a suggestion. When you update the post on how to do it, it's worth noting that the form width should be set to 513; not 520. Otherwise you get a horizontal scroll bar for some reason. Not sure why but it's always been my experience. Thanks again.

  • Profile Image
    fxr
    Answered on October 26, 2011 at 12:03 PM

    OK. Thanks for the heads up. Appreciated.