Bottom of forms cut off when changing border attribute

  • Profile Image
    longo
    Asked on January 17, 2012 at 07:52 AM

    I had a box shadow inset border on my form and changed it to box shadow which cut off the bottom of both my forms, I've tried adding a margin-bottom attribute and even giving it a height attribute, neither have had any affect. They both look OK in preview but not live. I would be grateful if you could take a look.

  • Profile Image
    pinoytech
    Answered on January 17, 2012 at 09:25 AM

    Hi longo,

    Have you tried to use iFrame? If not, here's a guide on how to get your form's iFrame code. Follow the steps below.

    1. Go to Setup & Embed

    2. Click Embed Form

    3. Click iFrame

    Hope you find this information helpfull.

    For further assistance, please don't hesitate to contact us! Thank you for using JotForm!

  • Profile Image
    longo
    Answered on January 17, 2012 at 10:22 AM

    Hello and thanks for your reply, I don't like using the iframe as it creates a space under the form and pushes everything else down, this has been fine until I changed the border so it has to be that causing the problem.

  • Profile Image
    fxr
    Answered on January 17, 2012 at 05:40 PM

    Hello Longo,

    Can you try adding some Custom CSS:

    From the Setup & Embed toolbar, click on the Preferences icon, select Form Styles tab and in the Inject Custom CSS text area, add the following:

    .form-all {height:560px !important;}

     

    Try experimenting with different values for 560 if that size isnt quite right. 

  • Profile Image
    longo
    Answered on January 18, 2012 at 03:58 AM

    Hi Fxr, I did try adding a height attribute, it extended the form but the bottom 'shadow' was still cut off. As I said above the form was fine with an inset shadow just not with this configuration, its all a bit strange.

  • Profile Image
    idarktech
    Answered on January 18, 2012 at 05:31 AM

    Hi longo,

    Can you please try:

    .form-all{

    max-height: 570px !important;

    }

    If this doesn't work, please let us know for your further assistance. Thank you so much!

  • Profile Image
    longo
    Answered on January 18, 2012 at 05:50 AM

    Hello idarktech, unfortunately that doesn't do anything even after increasing/decreasing the px value

  • Profile Image
    idarktech
    Answered on January 18, 2012 at 07:20 AM

    Longo,

    Apologies for not responding you on time, have you already tried injecting margin-bottom? Like below? If not, please give it a try and tell us if this still doesn't help. I just tested it on my page and it fixes after injecting margin-bottom. Thank you so much for your patience.

    .form-all{

    margin-bottom: 20px !important;

    }


  • Profile Image
    longo
    Answered on January 18, 2012 at 09:52 AM

    Hi idarktech, no need to apologize your replies have been very prompt, I did try the margin attribute and it didn't work. I've now pasted the full source code into my site and that seems to have worked OK, thanks for your help with this.