Skip to main content
added 450 characters in body
Source Link

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');

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

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');
edited tags
Link
JoannaW_MSFT
  • 6.6k
  • 1
  • 8
  • 10
Source Link

How to set the width of a Single Rich Text Editor field?

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