Size multi-line textarea to Width 100%

[smithme]

I have been using a couple of forum posts to try and make the Display view of a RTF field to width: 100% so that it will use all of the available horizontal space of the screen and when printed.

I have tried assigning attr("width", "100%") to the "ms-rtestate-field" but that doesn't work. I have tried editing the pages source through Chrome to see if I can get the text to 100%. There is are two other divs but setting them to width: 100% doesn't seem to work either. The source of the field looks like this:

Code: Select all

<div class="fd_field paratext" fd_name="Coaching" style>
	<div class="ms-formbody fd_control" fd_type="RichTextFullHtml" fd_required="True" style fd_readonly="True">
		<div class="ms-rtestate-field" width="100%">
			<div dir>
				<div class="ExternalClass570C5E2F893A4AD48BD3FBE0F444A265">
					<p>...</p>
				</div>
			</div>
		</div>
	</div>
</div>

When I mouse over the fd_field and ms-formbody they are all width 100%;
Starting with div ms-rtestate-field, div dir, and div ExternalClass they are not width 100% but manually adding the style="width:100%;" to them doesn't change anything.

Any suggestions?

[Nikita Kurguzov]

Hello, Marion!
You can use something like this inside CSS editor to get input field width to 100%:

Code: Select all

.fd_field[fd_name='FIELD_NAME'] > .fd_control .ms-rtestate-field {
    width:  100%;
 }
 

You can also use width: 100% !important; to make sure that previous style gets overriden, it would probably work with less specific selectors. But don't expect that the field will take all the page with 100% width, it will only take 100% of available width inside the web part, plus there is also a title to the side (which you can disable, of course).

Let me know if this code works for you or if you want something else. If you do, please attach a picture of what you want to get, so it's easier for me to recommend something useful.