Bootstrap5でtextareaのvalidationアイコンがスクロールバーに重なってしまい困ってます。

Question

Bootstrap5でtextareaのvalidationアイコンがスクロールバーに重なってしまい困ってます。

一度padding-right: 10pxを入れたのですが、効果がありませんでした。

どなたかわかれば教えて下さい。

<div class="col-md-9">
    <textarea class="form-control form-control-sm" id="remarks" rows="3" style="width: 100%; padding-right: 10px;" v-if="viewModel" v-model.trim="viewModel.Remarks" v-bind:class="validationClass.Remarks" v-bind:readonly="isReadOnly.Remarks"> 
    </textarea>
    <div class="invalid-feedback" id="remarksFeedBack">{{ message.Remarks }}</div>
</div>

Answer 1

textareaはスクロールバーを非表示にするため、overflow:hidden;で対応することにしました。

<textarea class="form-control form-control-sm" id="content" rows="10" style="width: 100%; overflow:hidden;" v-if="viewModel" v-model.trim="viewModel.Content" v-bind:class="validationClass.Content" v-bind:readonly="isReadOnly.Content"></textarea>

Answer 2

アドホックな感じがしますが、background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem + 17px);とかですかね……

Comments

[mee12]

コメントありがとうございます。
結構複雑になってしまいますね。
Bootstrapドキュメントをみたところ、textareaはscroll bar無しで使用するのが良さそうです。

ありがとうございます。