<textarea> not rendering in Service Portal modal

[Kim Sullivan]

Unsure which release this stopped working in, but we have a <textarea> tag in the HTML section of the service portal approvals widget.  Its supposed to render in a pop-up modal, but now does not appear.  Just doesn't open.  Anyone else see a similar issue and know how to fix it?

<script type="text/ng-template" id="commentsModal">
	<div>
	<div class="modal-header">
		<h3 class="modal-title">Confirmation</h3>
	</div>
	<div class="modal-body">
		<div style="margin-bottom: 10px;">{{::c.actionName}} this item?</div>
		<div class="row">
			<div class="col-sm-3 approval-modal-label">Comments</div>
			<div class="col-sm-9 approval-modal-body-right">
				<textarea ui-tinymce="c.config" ng-model="c.comments"></textarea>
			</div>
		</div>
	</div>
	<div class="modal-footer approval-modal-footer">
		<button class="btn btn-sm btn-default" type="button" ng-click="c.cancel()">Cancel</button>
		<button class="btn btn-primary btn-sm" type="button" ng-click="c.ok()">Ok</button>
	</div>
</div>
</script>

[Murthy Ch]

Hello @Kim Sullivan 

Can you go through the below points:

1. Check Dependencies: Make sure you have included all the necessary dependencies for ui-tinymce to work properly. If any dependency is missing, it might cause issues with rendering the textarea.

2. Controller Scope: Ensure that c.comments is properly initialized and accessible within the scope of the controller or directive where this template is being used.

3. Check for Errors: Look for any errors in the browser console or in your JavaScript console that might indicate what's going wrong. These errors could be related to missing dependencies, scope issues, or other problems.

4. CSS Styling: Check if there are any CSS rules that might be hiding or styling the textarea in a way that makes it not visible. Sometimes CSS rules can unintentionally hide elements on the page.

5. Inspect Element: Use your browser's developer tools to inspect the element and see if the textarea is present in the DOM. If it's present but not visible, there might be CSS or layout issues causing it to be hidden or overlapped by other elements.

6. ng-model Binding: Ensure that ng-model="c.comments" is correctly bound to a property in your controller's scope and that this property is being updated as expected.

[Asif_Jawed]

Hi @Kim Sullivan ,

We can achieve the <textarea> tag using modal window.
Below is the code to do it.

HTML Template Code:

<div>
<button class="btn btn-primary" ng-click="c.openModal()">${Open Modal}</button>
</div>

<script type="text/ng-template" id="modalTemplate">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Modal Window</h4>
</div>
<div class="panel-body wrapper-xl">
<div>
<div class="modal-header">
<h3 class="modal-title">Confirmation</h3>
</div>
<div class="modal-body">
<div style="margin-bottom: 10px;">{{::c.actionName}} this item?</div>
<div class="row">
<div class="col-sm-3 approval-modal-label">Comments</div>
<div class="col-sm-9 approval-modal-body-right">
<textarea ui-tinymce="" ng-model=""> Hello</textarea>
</div>
</div>
</div>
<div class="modal-footer approval-modal-footer">
<button class="btn btn-sm btn-default" type="button" ng-click="">Cancel</button>
<button class="btn btn-primary btn-sm" type="button" ng-click="">Ok</button>
</div>
</div>
</div>
<div class="panel-footer text-right">
<button class="btn btn-primary" ng-click="c.closeModal()">${Close Modal}</button>
</div>
</div>
</script>

Client Script Code:

api.controller=function($uibModal, $scope) {
/* widget controller */
var c = this;
c.openModal = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplate',
scope: $scope
});
}
c.closeModal = function() {
c.modalInstance.close();
}
};

Preview:

OnClick of "Open Modal" button you will get the pop-up.

Below is the pop-up preview:

If my answer has helped with your question, please mark my answer as accepted solution and give a thumb up.

Best regards

Asif Jawed