Change width of a SharePoint rich text editor (textarea field – multiline text)

A coworker wanted to change the width of a textarea on a new-form. This is, as it turns out, not so easy.

The textarea is a complex component, containing lots of other components:

TD

-span

– span

-textarea

– table

-iframe

– div

-iframe

– head

– body

– input

Guess which one you need to change to get/set the width for the multiline textfield? You are thinking about the input field or the textarea? Wrong, it is the body field of the iframe inside the div.

So, to make a long story short..if you want to change the width:


$('iframe[title="Rich Text Editor"]').width('400');

This will set the width of all Rich-Text-Editors on the page. If you only want to change 1, you have to take the ID of the iframe and put it there:


$('iframe[id="ctl00_m_g_52db519f_2c86_4899_ad40_66394be45805_ctl00_ctl05_ctl04_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_iframe"]'). width('400');

Same thing for the height of a richt text:


$('iframe[title="Rich Text Editor"]').height('400');

Tnx to Zach Rosenfields blogpost

About: Marijn

Marijn Somers (MVP) has over 14 years experience in the SharePoint world, starting out with SP2007. Over the years the focus has grown to Office 365, with a focus on collaboration and document management. He is a business consultant at Balestra and Principal Content Provider for "Mijn 365 Coach" that offers dutch employee video training. His main work tracks are around user adoption, training and coaching and governance. He is also not afraid to dig deeper in the technicalities with PowerShell, adaptive cards or custom formatting in lists and libraries. You can listen to him on the biweekly "Office 365 Distilled" podcast.