bokunonikki.net

Bootstrap、textareaのリサイズを制限する方法

Fri May 25, 2018
Thu Jun 24, 2021

Bootstrapのtextareaは、デフォルトでは縦横自由にユーザーがリサイズできます。

これを縦だけリサイズできるように変更します。

環境

  • rails haml

単純にBootstrapのtextareaを上書きするだけだったら、以下のようにすれば大丈夫です。

1
2
3
4
5
<!-- custom.css -->

textarea {
  resize: vertical;
}

view側(haml)

1
= text_area_tag :text, '', class: 'form-control'

しかし、上書きするとあとあと面倒なことになるのでsassをつかって、デフォルトのBootstrapのtextareaの要素を継承するような形にしてカスタマイズするのがベストです。

sassの@extendを使ってデフォルトのBootstrapのtextareaの要素を継承デフォルトのBootstrapのtextareaの要素を継承し、新たにtextarea-verticalをつくりました。

1
2
3
4
5
6
<!-- custom.scss -->

.textarea-vertical {
    @extend textarea !optional;
    resize: vertical;
}

textarea-verticalをviewのクラスに追加すればokです。

view側(haml)

1
= text_area_tag :text, '',class: 'form-control textarea-vertical'
See Also