javascript - Angular 6 文本区域调整大小事件问题

Question

我正在开发一个有文本区域的 Angular 6 应用程序。出现错误时，应在右上角的文本区域旁边显示一个星号。我遇到的问题是调整 textarea 元素的大小，textarea 元素和星号之间有间隙。我想我需要动态地将文本区域的宽度赋予星号。但是，我无法通过 CSS 对其进行处理或在其上获取 (resize) 事件。怎么办？任何帮助将不胜感激。

示例代码如下。

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;
}

Answer 1

.textareaContainer{
   display:flex; 
}

<div class="textareaContainer">
    <textarea id="dataVal" placeholder="Max 20 Characters"></textarea>
   <span class="display-inline error-asterisk">*</span>
</div>

这可以通过 display:flex; 轻松完成，默认情况下 align-items 设置为 flex-start 这意味着所有元素都将从顶部开始 & 默认情况下 flex 将元素一个接一个地放置