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...