Help adding a line break in a section header

  • kdaaka1908
    Asked on June 21, 2021 at 11:47 PM

    Can you tell me how to add a line break? In the referenced form, I want to break the line between Send-Off and August 14. Thanks!

  • sevki JotForm Developer
    Replied on June 22, 2021 at 1:25 AM

    Hi kdaaka1908,


    You can do it by following the steps below.

    1) Click on the "Form Designer" button on the right side of your page.

     1624339112 60d172a820174 formdesignercli Screenshot 10

    2) You will reach the relevant page by clicking the "Advanced Designer" button from the opened section.

     1624339124 60d172b43e900 formdesigner op Screenshot 21

    3) On this page, more detailed settings can be made about your form. Select the "CSS" section on the right and click on the area with the line to see that that area is selected. After clicking, paste the line we have given you below in the field that opens on the right.

    1624339230 60d1731e60cdc formdesigner fo Screenshot 32

    .form-buttons-wrapper.form-buttons-auto.jsTest-button-wrapperField {

        bottom-top: none;

    }

     

    4) After performing these operations, you can save the changes you have made by clicking the "Save changes" button. To reach your form, you can reach your form by clicking the "Back to builder" button above the save changes button.

    1624339208 60d1730829415 formdesigner fo Screenshot 43

    Preview:

    1624339351 60d17397a72f0 formdesigner fo Screenshot 54

    Please do not hesitate to contact us if you require any further assistance.

  • kdaaka1908
    Replied on June 26, 2021 at 10:47 AM

    Sevki,

    I asked about breaking the line in the header between Off and August. You gave me a response re: a border on the button. Can you review and resend the relevant guidance? Thanks!

  • sevki JotForm Developer
    Replied on June 26, 2021 at 2:52 PM

    Sorry for the misunderstanding.

    For the transactions in the 3rd and 4th items I mentioned above, it will be sufficient to perform the following operation.

    1624733274 60d7765a88426 duzeltme Screenshot 10

    .form-header-group.header-large { 
    border-bottom: none;
    }


    Please do not hesitate to contact us if you require any further assistance.

  • allenfam97
    Replied on June 26, 2021 at 3:23 PM

    I don't think I'm being clear. Let's try this. Currently, the header looks like this:

    Matthew's College Send-Off August 14

    at 12:00pm (Rain Date: Aug. 15)


    I want it to look like this, with the second line of text starting with August 14:

    Matthew's College Send-Off

    August 14 at 12:00pm (Rain Date: Aug. 15)


  • Patrick_R
    Replied on June 27, 2021 at 3:11 AM

    Hello! Our apologies for the inconvenience. Adding line breaks in header elements isn't supported. But there is a workaround to achieve this, i.e. to use the paragraph element as these elements allow formatting.

    As an example, please check this form: https://www.jotform.com/211771546418963. Following is how the header should look like in this form:

    1624777610 60d8238ac6526 Matthlege Send  Screenshot 10

    If this solves your purpose, then you can remove your form's header element; add a paragraph element at its place (as indicated in the screenshot below) and from the source code view, add the following code; then save.

    <div class="form-header-group header-large" style="margin-top:-20px;">
     <div class="header-text httac htvam">
      <h1 id="header_1" class="form-header" data-component="header">
       Matthew's College Send-Off<br />August 14 at 12:00pm (Rain Date: Aug. 15)
      </h1>
      <div id="subHeader_1" class="form-subHeader">
       Please RSVP and let us know whether you will attend.
      </div>
     </div>
    </div>

    1624777687 60d823d7cee01 The Easiest Onl Screenshot 21

    Let us know if you come across any issues.

    Thank you!