How do I adjust the height of the second page? AND CSS for Submit and Next buttons

  • Profile Image
    miskiswap
    Asked on August 31, 2012 at 02:15 AM

    1.  How do I adjust the height of the second page?

    2.  After clicking on the "Next" button, I go to page two, but not to the top of the page.  Is there a way after clicking "Next" to be directed to the top of Page 2?

    3.  I would like to change the position of the "Next" button and the Submit, Clear and Print Form buttons.

     

  • Profile Image
    idarktech
    Answered on August 31, 2012 at 11:45 AM

    Hi,

    1. I'm sorry but it can't be adjusted, as far as I know. Your page height depends only on your form fields, so the shorter fields you have under the pagebreak, the smaller page it displays (if you're using javascript embed code).

    2. We have few reports regarding this issue and it was already escalated to our development team. Hopefully they'd be able to add something on the pagebreak tool that would automatically scroll to the top of the form when "next and back" is clicked.

    3. You can do this via CSS injection: How to Inject Custom CSS Codes to a form. Please give us more details about where you want this buttons to move so we can help you with the css codes.

    Thanks!

  • Profile Image
    miskiswap
    Answered on August 31, 2012 at 11:51 AM

    Is there a way to have all the buttons on the same line? Or have them right justify?

  • Profile Image
    idarktech
    Answered on August 31, 2012 at 12:08 PM

    Ok, how about this?

    If you like, you may add this CSS codes to your form.

     

    #cid_52 .form-label-left {

    width:0 !important;

    }

     

    .form-submit-button, .form-submit-reset, .form-submit-print{

    position: relative;

    top: 50px;

    left: 195px;

    }

     

    .form-pagebreak > .form-button-error {

    position: relative;

    top: 30px;

    left: -50px;

    }

    Let us know if you want some changes. Thanks!

     

  • Profile Image
    miskiswap
    Answered on August 31, 2012 at 12:24 PM

    THANK YOU!  THANK YOU!  THANK YOU!!!!!!!

  • Profile Image
    miskiswap
    Answered on August 31, 2012 at 12:28 PM

    1. I'm sorry but it can't be adjusted, as far as I know. Your page height depends only on your form fields, so the shorter fields you have under the pagebreak, the smaller page it displays (if you're using javascript embed code).

    I'm not sure I understand what you mean by the highlighted area.  Also, I'm using iframe.

  • Profile Image
    miskiswap
    Answered on August 31, 2012 at 12:40 PM

    http://form.jotform.us/form/22395670814155

     

    I tried using the above CSS for Facebook.  The width of the form on Facebook is 520.  

    I tried adjusting the "left" numbers.  And nothing changed.  

    How do I move everything over to the left?

  • Profile Image
    miskiswap
    Answered on August 31, 2012 at 03:51 PM

    The code above disabled my buttons.  I just tried them out.  It looks nice, but when I hit the submit button it just jumps up.

    Is there something else I need to do?

  • Profile Image
    Mike_T
    Answered on August 31, 2012 at 06:45 PM

    I'm not sure I understand what you mean by the highlighted area. Also, I'm using iframe.

    Form height is automatically adjusted by our system based on the form fields. However, this is not an option for the iFrames, since we do not automatically change the height of the iFrames.

    I tried adjusting the "left" numbers. And nothing changed.  

    Could you please be more specific? What exactly do you want to adjust?

    The code above disabled my buttons. I just tried them out. It looks nice, but when I hit the submit button it just jumps up.

    Would you like to move your Submit, Clear & Print buttons to the Page Break line (implement Idarktech's solution) for that Facebook form?

    I would like to ask you kindly use one forum thread per one inquiry. In other words, keep unrelated questions in separate threads. That helps other JotForm users, and our Support Team to provide efficient support.

    Thank you for cooperation.

  • Profile Image
    idarktech
    Answered on August 31, 2012 at 09:27 PM
    Hi,
    Yes, I noticed that the buttons move to it's original position when clicked. I also modified the codes to work with different browsers as I can see that codes doesn't work with FF well. Please use the following codes:
    #cid_52 .form-label-left {
    width:0 !important;
    }
    .form-pagebreak > .form-button-error {
    position: relative;
    top: 30px;
    left: -50px;
    }
    .form-button-error{
    display:block !important;
    }
    .form-buttons-wrapper{
    margin-left: 255px !important;
    position: absolute;
    margin-top: 20px;
    width: 400px;
    text-align: right;
    }

    ------------------------------------------------
    For your Facebook Form, please use this:

    #cid_53 .form-label-left {
    width:0 !important;
    }
    .form-pagebreak > .form-button-error {
    position: relative;
    top: 30px;
    left: -50px;
    }
    .form-button-error{
    display:block !important;
    }
    .form-buttons-wrapper{
    margin-left: 255px !important;
    position: absolute;
    margin-top: 20px;
    width: 400px;
    text-align: right;
    }

    See how it looks like here: http://www.jotform.me/form/22435337916456?
    Hope this helps. Let me know if you find any problems using these codes. Thanks!