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

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

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

環境

単純に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'