はじめに
ポートフォリオを制作中text_fieldの大きさの変更で少し詰まったのでメモを残します。
初期設定のフォーム
hoge.html.erb
<%= f.label :text_field %><br>
<%= f.text_field :city %>
<%= f.label :text_area %><br>
<%= f.text_area :content %>
何も指定しないと上の画像のような大きさになっていると思います。
そこでこのフォームの大きさを変えるべく調べるとsizeで指定できるとのこと。
hoge.html.erb
<%= f.label :text_field %><br>
<%= f.text_field :city, :size=>"40" %>
<%= f.label :text_area %><br>
<%= f.text_area :content, :size=>"40x10" %>
結果
うーーん。確かに大きくはなったけど
- text_fieldの高さを変えることができない
- col,lowでの指定なのでサイズ調整が難しい（私は勝手にpxでのサイズ指定かと勘違いしていたため最初にとんでもない大きさになってびっくりしました...笑）
作られるHTMLの確認
検証ツールで確認すると以下のようにHTMLが生成されていました。
text_field
<input type="text" name="event[city]" id="event_city">
text_area
<textarea name="event[content]" id="event_content"></textarea>
ここにCSSを当てれば行けそう！
CSSを当ててみる
hoge.scss
input[type="text"]{width:200px;height:50px;}textarea{width:300px;height:100px;}
いい感じ！
かと思いきや。。。
ヘッダーにある検索窓もでっかくなっている...!
text_field全体に適用されたためサイズを変えたくない検索窓も大きくなってしまいました。
解決策
hoge.scss
input[type="text"][name="event[festival]"]{width:200px;height:50px;}textarea[name="event[content]"]{width:300px;height:100px;}nameを指定すれば意図した箇所にだけ反映されました！
終わりに
ご覧いただきありがとうございました。
初心者のため間違っている点などございましたらご指摘いただけると幸いです。