1

Sharepoint 2016 On Prem:

My form has multiple rich text editor fields but I only want to change the width of one of them.

I know how to do it using css or script for ALL rich text editor fields, but I can't figure out how to do it for only 1 of them.

This css entry updates all the rte's:

.ms-rtestate-write{
    width:1000px;
}

And this script does all the rte's as well:

$('.ms-rtestate-write').css("width","700px");

I'm sure I must have to reference the id of the field I want to update but I found multiple id's and I don't know which one to use or the right syntax.

Which of these id's should I use?

Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_inplacerte
Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_topDiv
Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_inplacerte_label

This will change the field I want but it also updates the other rte fields:

document.getElementById('Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_inplacerte').style.width='1000px'; 

How can I do this to affect only my one field? I think I'm close but I can't figure out the right combination. I'd prefer to do it with css but I'm ok with either option.

Thank you

EDIT:

JoannaW's suggestion worked. The key is that you need to reduce the width of the other rte fields individually.

My final code:

//increase the width of the Body of Email field
$('div[id="Body_2a4c2989-39fe-44db-a783-3559dc47ddea_$TextField_topDiv"]').css('width','1000px');
// reduce the width other rich text fields
$('div[id="Purpose_b9fb03fb-d16a-435f-bf51-0cfc0a47e95c_$TextField_topDiv"]').css('width','350px');
  • Could you not open the form in InfoPath and then set the particular width on that field using Field Properties? – SPChick Feb 26 at 1:21
  • I'm not using infopath and it's not a custom form. Just a basic form but I need to make minor adjustments. – Ice Cube Feb 26 at 1:22
1

The fields are put in a table.

Try using the following scripts:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {   
    // change the td width
    $('td.ms-formlabel:contains("rich01")').closest('td').next('td')[0].width='1000px';
    // reduce the width other rich text fields
    $('div[id="rich02_3ed196b8-bcfc-4f8c-b2f2-e87fb291651d_$TextField_topDiv"]').css('width','350px')           
}, false); 
</script>

The testing results:

enter image description here

  • That worked, thank you. I'm not sure why you added the event listener as I put mine under $(document).ready and it works the same. I guess the key is that you need to reduce the size of the other fields. – Ice Cube Feb 26 at 18:56
  • You say tomato..., DOMContentLoaded and $(document).ready are both adding an event listener, it's just that which event listener is abstracted away from you with $(document).ready. And on a modern browser, they're the same, but DOMContentLoaded may not be supported by older browsers. eager.io/blog/how-to-decide-when-your-code-should-run – Joe McShea Feb 27 at 1:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.