How to add new line to the Sub-Heading Text

  • Profile Image
    sisters7
    Asked on December 21, 2016 at 09:36 AM

    I  inserted <br> to bring June 1 - June 3, 2017 to the line below Hope College.... However this <br> became part of the text, please see preview of my form.  Please help bring June 1 - June 3, 2017 to the second line of sub-heading. Thanks.

  • Profile Image
    emily
    Answered on December 21, 2016 at 10:15 AM

    Hi, 

    Thank you for contacting us.  

    Unfortunately, you cannot end a new line with HTML codes. However, you can alter the design by injecting custom CSS codes.

    Please copy this text  "Hope College,Holland,MI  June 1 - June 3, 2017" into the Subheading Text Area of your header. The first blank space should be the place where the new line starts.

    .form-subHeader {

        width : 160px;

        white-space : normal;

        margin-left:230px;

    }

    Here is the user guide on injecting custom CSS codes.

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

    Please try this solution and let us know if you encounter any problem.

    Thank you.

  • Profile Image
    sisters7
    Answered on December 21, 2016 at 11:44 AM

    I copied & pasted your code. Now MI became the first part of the dates. MI should be the last part of the first sub-heading.

    Thanks again.

  • Profile Image
    Kevin_G
    Answered on December 21, 2016 at 12:18 PM

    As I can understand you need the text to be displayed like this: 

    To achieve that you only need to increase the field width so the final code should be this one: 

    .form-subHeader {

        width : 170px;

        white-space : normal;

        margin-left : 230px;

    }

    Please inject it and let us know if you have any question. 

     

  • Profile Image
    sisters7
    Answered on December 22, 2016 at 07:27 AM

    Kevin's suggestion helped, however this code also affected all other sub-headings which should not be changed.

    Sub-heading for Section 2, 4 and 5 should not be narrowed down to 1/3 of the space.

    Please help again. 

  • Profile Image
    Helen
    Answered on December 22, 2016 at 07:47 AM

    Hi,

    You must inject this CSS codes for only affect first sub-heading:

    #subHeader_418 {

        width : 170px;

        white-space : normal;

        margin-left : 230px;

    }

    Everyting works properly on my side. As you can see:

    Please let us know if you need any further assistance.

  • Profile Image
    sisters7
    Answered on December 22, 2016 at 08:02 AM

    Helen's suggestion brought back my original problem. The <br> became part of the first subheader: The correct way should be

    Hope College, Holland, MI

    June 1- June 3, 2017

    not Hope College, Holland, MI<br>June 1- June 3, 2017

    Can someone help again? Thanks.

     

     

  • Profile Image
    Helen
    Answered on December 22, 2016 at 08:22 AM

    Hi,

    I have cloned your form and tested on my side. You must be delete <br> into your sub-heading.

    After that, please remove this CSS code into your form:

    .form-subHeader {

        width : 90% !important;

        margin : 0 auto !important;

    }

    And add this CSS codes that I shared with you before:

    #subHeader_418 {

        width : 170px;

        white-space : normal;

        margin-left : 230px;

     

    }

    Here is form without sub-heading contain <br> :

    Please test it on your side. If  you have still problem, feel free contact us.

  • Profile Image
    sisters7
    Answered on December 22, 2016 at 08:26 AM

    This is still not correct. MI should be in the back of Holland,, not in the front of the dates.

  • Profile Image
    emily
    Answered on December 22, 2016 at 08:34 AM

    Hi,

    Please change the width of the subheader to 190px. This should solve the issue.

    .form-subHeader {

        width : 190px;

        white-space : normal;

        margin-left : 230px;

    }

    Here is the screenshot of the form after the alteration above.

    I hope this helps. 

    Thank you.

  • Profile Image
    sisters7
    Answered on December 22, 2016 at 09:04 AM

    Thanks! It worked.