Set part of label to italic

  • IDOEWebmaster
    Asked on August 4, 2017 at 12:02 PM

    I have read and applied the instruct on how to inject CSS for italic part on the label text but it did not work on my form, please check it for me.

    Here is the form https://form.jotformpro.com/72125558715964 - I need for question number 4 to have this part "Although this was offered to align to the Lilly Grant process, please only include time spent on RSC and not grant writing" italic, I have delete this text from the label, but it did not work, then I added it back, itid not work either ways. Here is my inject CSS

     label#4If17:after{

     

      content:"Although this was offered to align to the Lilly Grant process, please only include time spent on RSC and not grant writing";

     

      font-style: italic;

    }

    Please help ASAP. Thanks so much.

  • Chriistian Jotform Support
    Replied on August 4, 2017 at 12:15 PM

    Please remove the text on your label and the current custom CSS code. Replace the custom CSS code with this:

    label#label_17:after{

    content:"Although this was offered to align to the Lilly Grant process, please only include time spent on RSC and not grant writing";

    font-style: italic;

    }

    Here is how the field will look like:

    Set part of label to italic Image 1 Screenshot 20

  • IDOEWebmaster
    Replied on August 4, 2017 at 12:35 PM

    Thank you very much, it works for italic:

    Now please assist to underline "process" and "online portal" in the questions below:

    question #7 – underline process

    question #8 underline process

    question #9 underline process

    question #10 underline online portal

     

    question #12 underline online portal 

    Thanks so much!

  • Support_Management Jotform Support
    Replied on August 4, 2017 at 2:04 PM

    I'm afraid you won't be able to format parts or sections of the label since the builder strips out HTML codes you attempt to enter on the field label. As an alternative, why not use the stand alone Text Field and use it as a "pseudo" label? Meaning, it will serve as a label even though it's not the actual label of the field.

    With this approach, you can freely style/format it to your heart's content since this field supports HTML and CSS on its own. At the same time, it has a basic formatting toolbar for bold, italic, and underline.

    Set part of label to italic Image 1 Screenshot 30

    If you'd go with this approach, you would need to remove the CSS you used for adding the 'content', then replace it with a Text Field. And that's where you will format the text upon your discretion.

    Afterwards, you may need to hide the default labels (don't delete them, just hide them with CSS):

    .form-label.form-label-auto {

      display: none;

    }

    .form-html {

      padding: 0;

      margin-bottom: -50px;

    }

    The Text Field is too tall by default to work as a pseudo label so the margin had to be adjusted. With the padding and margin adjustments above, the Text Field will sit right on top of the fields (as if they were labels). Here's a stripped down version of your form showing the changes I suggested using the Text Fields.

    https://www.jotform.com/72155462790964

    Set part of label to italic Image 2 Screenshot 41

  • IDOEWebmaster
    Replied on August 7, 2017 at 11:02 AM

    Thank you for the solution using text to be label, I used it as a temporary way at this time.

    Now, I have another question on how to set italic in the content for single choice (radio button) and multiple choice (check box), for example in question 5: are you able to italicize the words in parenthesis? 

    (Program Focus, Student Competencies, Professional Competencies)

    (School Counselor Competency and Program Assessments, Time-use Assessment, Annual Agreements, Advisory Councils, Use of Data, Curriculum, Small Group and Closing the Gap Action Plans, Calendars)

     (Direct Student Services (Core Curriculum, Individual Student Planning, Responsive Services), Indirect Student Services)

    Thank you very much for your assistance.

  • IDOEWebmaster
    Replied on August 7, 2017 at 11:05 AM

    Sorry I've forgot to provide the new form, here it is at https://form.jotformpro.com/72156181815961 

    Thanks so much.

  • Chriistian Jotform Support
    Replied on August 7, 2017 at 12:25 PM

    To set the radio button label to italic, please add/inject the following custom CSS code on your form:

    #label_input_49_0:after{

    content:"(Program Focus, Student Competencies, Professional Competencies)";

    font-style: italic;

    }

    #label_input_49_1:after{

    content:"(School Counselor Competency and Program Assessments, Time-use Assessment, Annual Agreements, Advisory Councils, Use of Data, Curriculum, Small Group and Closing the Gap Action Plans, Calendars)";

    font-style: italic;

    }

    #label_input_49_2:after{

    content:"(Direct Student Services (Core Curriculum, Individual Student Planning, Responsive Services), Indirect Student Services)";

    font-style: italic;

    }

    Please ensure you have removed the text on your radio button so the text will not be displayed in duplicate.

    Set part of label to italic Image 1 Screenshot 20

  • IDOEWebmaster
    Replied on August 7, 2017 at 3:28 PM

    Thank you very much for your assistance, it works well.

    I appreciate your time.