Formatting Table In WYSIWYG Editor

  • Profile Image
    ocfoaratings
    Asked on August 04, 2013 at 06:03 PM

    I've got 5 identical Free Text (HTML) fields in my form. The fields are static text displayed in a 5 column table format. Two of the headers have red asteriks after the text indicating additional info below the table. In the wysiwyg tool the asterik in the far right column appears right next to the text. When I preview the form it's on a new line all by itself. 

  • Profile Image
    jonathan
    Answered on August 04, 2013 at 08:00 PM

    Hi,

    This is because you also have applied within the Free Text(HTML) field the styles that each table and td elements are using. Since the styles are within the HTML field, it get overwritten by the form's actualy stylesheets when viewed on a browser.

    Please test this form http://www.jotformpro.com/form/32157670931960 I was able to find the workaround to apply CSS code to add the styling into the table elements in the HTML field. Specifically the white-space:nowrap needed.

     

    I add a class within the Free Text(HTML) field values in your form like this...

     

    then I used the class name to add the right CSS code

     

    .td-kls{white-space:nowrap;}

    Use this guide on injecting CSS code to the form How-to-Inject-Custom-CSS-Codes

    Hope this help. Please inform us if you need further assistance.

    Thanks.

     

     

  • Profile Image
    ocfoaratings
    Answered on August 05, 2013 at 01:28 PM

    Jonathan,

    I wish I knew enough about html to understand what I did wrong, specifically how I  applied within the Free Text(HTML) field the styles that each table and td elements are using. I have no idea how I did that. I've been using a wysiwyg html editor to help me create much of this html so I suspect that is the culprit. The bottom line is that your solution worked. Thanks so much for your help.

    Mark

  • Profile Image
    jefreylandicho
    Answered on August 05, 2013 at 02:40 PM

    We are glad we were able to assist you. If  you ever need our assistance again, pelase do not hesitate to contact us again.

  • Profile Image
    ocfoaratings
    Answered on August 05, 2013 at 03:04 PM

    Jonathan,

    More weirdness. The html field you helped me with is duplicated and displayed on pages 2 - 6. No problem on pages 2 -5 but I cannot get it to display on page 6 (Back Judge ). It shows on the form builder, but when I look at the preview, it's not there. I've tried deleteing it, duplicating one of the other html fields and moving it into place on page 6 but nothing.

    Mark

    The new form is http://www.jotform.com/?formID=32165437410144 titled OCFOA Observation Form 2013 Rev 3 

  • Profile Image
    EltonCris
    Answered on August 05, 2013 at 05:24 PM

    Hi Mark,

    It wasn't showing initially because that field is tied on a condition. I have deleted the condition so you can view that field on page 6. It should be fine now. Kindly review your conditions as well.

    Thanks!