Change the submit button font line height and other styles

  • stringtheorist
    Asked on June 26, 2016 at 5:31 AM

    How can I change the line height of the text on this button? I've tried using the Designer edit functions but line height always stays the same.

    https://eu.jotform.com//?formID=42885325372359

  • flashim
    Replied on June 26, 2016 at 7:46 AM

    Line height is the distance in pixels between 2 lines. Please check with the following image.

    Change the submit button font line height and other styles Image 1 Screenshot 20

    You can edit the css as 

    .form-submit-button {

        margin-right : auto;

        line-height : 30px;

        font-size : 30px;

    }

    Let us know if this is what you are looking for. Thanks!

     

  • JasonBa
    Replied on June 26, 2016 at 9:58 AM

    In addition to my colleague's answer try to insert this CSS code. This will minimize the submit button height.

     .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {

    height: 44px !important;

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    You can change the value if you want.

    Thanks!

  • Elton Support Team Lead
    Replied on June 26, 2016 at 10:13 AM

    Please check out my colleague's solutions and let us know how it goes.

    Regards!

  • stringtheorist
    Replied on June 26, 2016 at 10:50 AM

    Thanks. I've tried these solutions and made some progress but the buttons still don't look right. I want all the font formatting to be the same. Please view these pages to see the errors:

     

    https://form.jotformeu.com/52683543918364 (font should be bold; button should be narrower)

    https://form.jotformeu.com/42885325372359 (line height is wrong)

    https://form.jotformeu.com/52683607053355 (line height and button width are wrong; font should be bold).

     

    I am also having difficulty integrating the Khand Google font of the buttons. This font appears in the editor but not in the live versions. Can you advise?

  • Elton Support Team Lead
    Replied on June 26, 2016 at 11:11 AM

    You have so many CSS codes injected in your form for the submit button field. Some of them are having conflicts and some are not properly declared which creates errors on the editor. So I went ahead and fix the submit buttons for you. 

    Change the submit button font line height and other styles Image 1 Screenshot 60

    I have also added your custom Google font - Khand.

    Change the submit button font line height and other styles Image 2 Screenshot 71

    Change the submit button font line height and other styles Image 3 Screenshot 82

    Change the submit button font line height and other styles Image 4 Screenshot 93

    The default font size on the CSS code is 30px, feel free to change it according to your preference. It is found on the injected CSS codes - bottom part.

    Change the submit button font line height and other styles Image 5 Screenshot 104

    Kindly check your forms now and let us know if you need anything else.

    Regards!

  • stringtheorist
    Replied on June 26, 2016 at 1:08 PM

    Many thanks!

  • Mike_G JotForm Support
    Replied on June 26, 2016 at 1:11 PM

    We are glad that the solution provided by my colleague worked for you. Should you have any other questions or concerns, please feel free to contact us anytime.