modal dialog textarea resize maximize restore

[arnieAustin]

I have a modal dialog with a single text area to be used to edit large comments (up to 4k characters).

As shown below, the dialog opens at a set size and the text area is also sized to fit in an area.

But I need the text area to resize on maximize and restore. I tried to do this with a little java script to no avail.

How do I accomplish this?

Code: Select all

<p:dialog id="modalEditTextDialogId" widgetVar="modalEditTextDialog"
      modal="true" resizable="true" maximizable="true" height="660" width="800" minHeight="660" minWidth="800"
      appendTo="@(parent)"
      header="#{modalEditText.modalHeaderLabel}" responsive="true"
      onHide="modalEditTextClear();"
      onShow="document.getElementById('modalEditTextDialogForm:modalEditTextDialogText').style.height='100%';
           document.getElementById('modalEditTextDialogForm:modalEditTextDialogText').style.width='100%';"
      >
     
      <p:ajax event="maximize"  oncomplete="document.getElementById('modalEditTextDialogForm:modalEditTextDialogText').style.height='100%';
           document.getElementById('modalEditTextDialogForm:modalEditTextDialogText').style.width='100%';" />
            
      <p:ajax event="restoreMaximize" oncomplete="document.getElementById('modalEditTextDialogForm:modalEditTextDialogText').style.height='100%';
           document.getElementById('modalEditTextDialogForm:modalEditTextDialogText').style.width='100%';" />
 
      <div class="ui-g">
 
             <div class="ui-g-12" style="width: 800px; height: 570px; ">
      
                    <p:inputTextarea id="modalEditTextDialogText"
                        value="#{modalEditText.text}" rows="0" cols="0" autoResize="false" placeholder="Enter some text"
                        maxlength="${modalEditText.maxLength}"
                        style="overflow-y: scroll; resize: both; width: 100%; height: 100%; max-width: 100%; max-height: 95%;" />
/code]

[arnieAustin]

Actually, I was able to do this without JS:

Code: Select all

<p:outputPanel id="modalEditTextDialogOutputPanel">

	<p:dialog id="modalEditTextDialogId" widgetVar="modalEditTextDialog"
		modal="true" resizable="true" maximizable="true" height="660" width="800" minHeight="660" minWidth="800"
		appendTo="@(parent)" 
		header="#{modalEditText.modalHeaderLabel}" responsive="true"
		onHide="modalEditTextClear();" 
		onShow=""
		>
		
		<div class="ui-g" style="width: 100%; height: inherit; ">
		
			<div style="width: 100%; height: inherit; ">

				<div class="ui-g-12" style="width: 100%; height: 90%; ">

					<p:inputTextarea id="modalEditTextDialogText"
						value="#{modalEditText.text}" rows="0" cols="0" autoResize="false" placeholder="Enter some text" 
						maxlength="${modalEditText.maxLength}"
						style="overflow-y: scroll; resize: both; width: 100%; height: 100%; max-width: 100%; max-height: 100%;" />
					<br/>
					<p:message for="modalEditTextDialogText" />
				</div>