Tuesday, September 27, 2016

InfoPath forms not displaying correctly in Chrome / FireFox

Recently I noticed that every form that I've created with Info Path 2013 (I know it's old-school, but no Nintex in this case) that contains Multiple Lines of Text fields was not displaying correctly in Chrome / FireFox e.g. the text was displayed on a single line and not wrapped.


In Internet Explorer, things look like this:


Another issue is that in FireFox, on editing the form noone could insert a few spaces - only one. The Enter key did not insert a new line in a Multi-line text field either. 

I managed to find the reason quickly - the text area that contains the field has the following property:
white-space: pre. Changing this to pre-line would work fine - you need to use a custom CSS file for that.


Of course you need the SharePoint Server Publishing feature enabled on the sites in order to inherit the CSS from the top-level site. Another one-off solution is to add this in a Content Editor webpart on the page(s) that contain your form...but I guess it's not one form with that kind of field that you'd use...

3 comments:

  1. Can you tell me what did I do wrong to implement this using content editor? I Have entered the below style code in content editor, but seems like it doesn't work. I have to remove the bracket on Style in order to post my comment.

    ​​style


    textarea
    {
    white-space: pre-line !important;
    }

    /style

    ReplyDelete
    Replies
    1. Hi Ling,

      Thanks for your question.

      I've actually tested this as part of an alternate CSS file.

      Not sure if it will work within a content editor, as it applies to the page it's loaded in only.

      I would suggest creating an alternate CSS file and loading it.

      Delete
    2. Thank you for your reply. I figured the solution, and it worked.

      The InfoPath form is being rendered on page such as: http://serverName/_layouts/FormServer.aspx. This page locates at
      C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\FormServer.aspx. We need to inject the below CSS code in the header section of the page, to force the textarea automatically wrap regardless.

      style type="text/css"
      textarea{white-space: pre-line !important;}
      /style

      Same code to be added into C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\PrinLoader.FormServer.aspx, so that the print view will behave the same way.

      Delete