[Solved] SPFx multiline textbox field rending as single line of text in SharePoint Online

SPFx multiline textbox field rending as single line of text in SharePoint Online
SharePoint deveopment training course

This SharePoint framework (SPFx) tutorial we will discuss how to solve SPFx multiline textbox field rending as single line of text in SharePoint Online issue which comes while trying to create a multiline textbox in SPFx.

If you are new to SharePoint Framework development, go through the below SPFx tutorials:

Issue: In SharePoint Framework client side webpart, I have created a multi-line text control to show the description of details in multi-lines. But, when I try to render the property it is coming in single line text.

SPFx multiline textbox field rending as single line of text in SharePoint Online
Text Control rendering as Single Line

Code I am using: I was using the below code to render the multi-line text control.

SPFx multiline textbox field rending as single line of text in SharePoint Online
SPFx multiline textbox field rending as single line of text in SharePoint Online

If you notice the above code, I am rendering the multi-lines text in a div tag. first I need to replace the newline character (\n) with <br> so that the HTML will render with new line text. we can achieve the same with the below code.

let descVal:string = escape(this.properties.description).replace(/\n/g,”<br>”);
and replace the escape(this.properties.description) with descVal as below:
<p class=”${ styles.description }”>${descVal}</p>

As soon we change the code the output will be is as below:

SPFx multiline textbox field rending as single line of text in SharePoint Online

Text Control rendering as Multi Line

Hope this helps, happy development in SPFx !!! Hope this SharePoint framework (spfx) tutorial helps to solve issue SPFx multiline textbox field rending as single line of text in SharePoint Online.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Krishna Vandanapu

I am Krishna.Vandanapu a SharePoint architect working in IT from last 13+ years, I worked in SharePoint 2007, 2010, 2013, 2016 and Office 365. I have extensive hands on experience in customizing SharePoint sites from end to end. Expertise in SharePoint migration tools like Sharegate, Doc Ave and Metalogix. Migrated SharePoint sites from SharePoint 2007 to 2010 and 2010 to 2013 several times seamlessly. Implementing CSOM with Microsoft best practices. Spent quality time in configuring SharePoint application services like User Profile, Search, Managed Meta data services etc. Now exploring SharePoint Framework and SharePoint 2019

View all posts by Krishna Vandanapu →
  • Hi Krishna, I am facing the same issue, but my value is retrieved from a list Multiline Text column in a SPFX webpart rather than a property. Your solution does not work for me. Do you have any suggestion for me?