In the development of my Angular 6 application, I have encountered an issue with a textarea element. When an error occurs, an asterisk should be displayed next to the textarea in the top-right corner. However, there is a gap between the textarea and the asterisk when resizing the textarea. I believe dynamically setting the width of the asterisk based on the textarea's width may solve this problem, but I'm unable to achieve it using CSS or by listening to a (resize) event. How can I address this issue effectively? Any suggestions or guidance would be greatly appreciated.
Here is a snippet of the sample code for reference:
demo-file.html
<div class="col-6 fix-custom-width">
<label for="dataVal"><span>*</span>Data Value</label>
<textarea id="dataVal" placeholder="Max 20 Characters" tabindex="2" type="text" class="form-control resizable-textarea" formControlName="dataVal" [ngClass]="{'is-invalid': dataVal.errors && (dataVal.dirty || dataVal.touched || submitted)}" required></textarea>
<span *ngIf="dataVal.errors && (dataVal.dirty || dataVal.touched || submitted)" class="display-inline error-asterisk">*</span>
<div class="red-color" *ngIf="dataVal.errors && (dataVal.dirty || dataVal.touched) || submitted">
<p *ngIf="dataVal.errors && dataVal.errors.required>
Required
</p>
</div>
</div>
demo-file.css
.error-asterisk {
position: absolute;
right: 0px;
top: 30px;
color: $error-message-text-color;
}
.fix-custom-width {
max-width: 100%;
}
.resizable-textarea {
max-width: inherit;
resize: both;
}