Word wrap on content editable div?

Ionic Framework ionic-v3
1

Im trying to replicate a comment box like facebook or whatsapp. It works fine using a div with contenteditable attribute. But, I just can’t make word wrap to work. Can anyone guide me on this? I’ve tried using ionic own text-wrap directive and also using css. Or if there’s better implementation or plugin of some sort.

<style>
	ion-content{
		position: relative;
	}	
	.commentbox{
		position: absolute;
		bottom: 0;
		padding: 5px;
		border-top: 1px solid grey;
		min-height: 40px;	
		padding: 10px;	
		width: 100%;
		color: grey;	
		word-wrap: break-word;
	    overflow-wrap: break-word;
	    white-space: normal;	   
	}
</style>

<ion-header>
  <app-navbar></app-navbar>  
</ion-header>

<ion-content>
	
	<ion-item class="commentbox">
		<div contenteditable text-wrap>Write comment</div>	
		<ion-buttons right item-right>
			<button ion-button clear>
				<ion-icon md="md-send"></ion-icon>
			</button>
		</ion-buttons>	
	</ion-item>
	
	

</ion-content>

image

2

Silly me. Mistakenly add the wrap css properties on ion-item instead of the div itself. Here’s the updated code for reference.

<style>
	ion-content{
		position: relative;
	}	
	.commentbox{
		position: absolute;
		bottom: 0;
		padding: 5px;
		border-top: 1px solid grey;
		min-height: 40px;	
		padding: 10px;	
		width: 100%;
		color: grey;	
		
	}
	.commentbox div{
		word-wrap: break-word;
	        overflow-wrap: break-word;
	        white-space: normal;	   
	}
</style>

<ion-header>
  <app-navbar></app-navbar>  
</ion-header>

<ion-content>
	
	<ion-item class="commentbox">
		
		<div 
		contenteditable="true" 
		[textContent]="comment" 
		(input)="comment=$event.target.textContent"				
		>
		</div>	    

		<ion-buttons right item-right>
			<button ion-button clear (tap)="submitComment()">
				<ion-icon md="md-send"></ion-icon>
			</button>
		</ion-buttons>	
	</ion-item>
	
	

</ion-content>

I also add a way to capture the values using example from stack overflow. You can’t use ngModel on a content editable div since it doesn’t have value attribute.

3

Are you saying you couldn’t get <ion-textarea> to work? Because I used it in a similar situation with no issues. Slightly sanitized:

<form #f="ngForm" (ngSubmit)="submitParagraph(f.value)">
	<ion-item>
		<ion-label stacked for="paragraph">Paragraph</ion-label>
		<ion-textarea rows="4" id="paragraph" name="paragraph" ngModel></ion-textarea>
	</ion-item>
	<button ion-button block type="submit">Submit</button>
</form>

and as a bonus, in case you’re interested, a simple way to generate pretty preview of the ion-textarea

<ion-card>
	<ion-card-header>Preview</ion-card-header>
	<ion-card-content style="white-space: pre-wrap;">{{f.value['paragraph']}}</ion-card-content>
</ion-card>
4

I’m not using a textarea because i want the input field to be expanded (more app-like) on newline rather than scroll. This is achievable through contenteditable element.