CSSで入力フォームを修正したい

Question

前提・実現したいこと

• placeholderにある文字を左寄せにしたい。
• formに対して、一行の文字入力を最大幅に合わせて入力できるようにしたい。

発生している問題

placeholderにある文字は、中央になる。
formに文字を入力する際、一行は全角13文字で改行される。

![

該当のソースコード

<%= form_with model: creation, local: true do |f| %> 
<%= render 'shared/error_messages', model: f.object %>
    
    <div class="creation__group">
      <div class="field">
        <%= f.label :title, "タイトル" %><br />
        <%= f.text_field :title, class: :creation__text, id:"creation_title", placeholder:"例）キッチンカウンターをDIY" %>
      </div>
    </div>

    <div class="creation__group">
      <div class="form-text-wrap">
        <%= f.label :category_id, "カテゴリー" %><br />
        <%= f.collection_select(:category_id, Category.all, :id, :name, {}, {class: :creation__category, id:"creation_category_id"}) %>
      </div>
    </div>

    <div class="creation__group">
      <div class="form-text-wrap">
        <%= f.label :image, "画像" %><br />
        <%= f.file_field :image, class: :creation__image, id:"creation_image" %>
      </div>
    </div>

    <div class="creation__group">
      <div class="form-text-wrap">
        <%= f.label :cost, "費用" %><br />
        <span class="sell-yen">¥</span>
        <%= f.text_field :cost, class:"creation__text", id:"creation_cost", placeholder: "500" %>
      </div>
    </div>

    <div class="creation__group">
      <div class="form-text-wrap">
        <%= f.label :material, "材料" %><br />
        <%= f.text_field :material, class:"creation__text", id:"creation_material", placeholder: "木材等" %>
      </div>
    </div>

    <div class="creation__group">
      <div class="form-text-wrap">  
        <%= f.label :tool, "道具" %><br />
        <%= f.text_field :tool, class:"creation__text", id:"creation_tool", placeholder: "メジャー等" %>
      </div>
    </div>

    <div class="creation__group">
      <div class="form-text-wrap">
        <%= f.label :description, "説明" %><br />
        <%= f.text_area :description, class:"creation__description", id:"creation_description", placeholder: "作品の苦労・工夫した点を教えてください", rows:"7" %>
      </div>
    </div>

    <div class="creation__group">
      <div class="form-text-wrap">
        <%= f.label :trigger, "きっかけ" %><br />
        <%= f.text_area :trigger, class:"creation__trigger", id:"creation_trigger", placeholder: "DIYを初めようとしたきっかけを教えてください", rows:"7" %>
      </div>
    </div>

    <div class="save__btn__contents">
      <%= f.submit "保存する", class:"save__btn" %>
      <%= link_to "戻る", root_path, class:"back__btn" %>
    </div>
<% end %> 

.creation__group {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.creation__text {
  padding: 10px 50px;
  margin-top: 10px;
  font-size: 16px;
}

.creation__category {
  padding: 10px 20px;
  margin-top: 10px;
}

.creation__image {
  padding: 10px 5px;
}

.creation__description {
  padding: 30px 200px;
  margin-top: 10px;
}

.creation__trigger {
  padding: 30px 200px;
  margin-top: 10px;
}

.save__btn__contents {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.save__btn {
  color: white;
  background-color: red;
  border: 1px solid red;
  margin-right: 2vw;
  padding: 10px 20px;
}

.back__btn {
  color: white;
  border: 1px solid gray;
  padding: 10px 20px;
}

試したこと

placeholderにtext-align: left;を指定しましたが、特に変化ありませんでした。
formの文字制限に関しては、padding/marginを調整しましたが解決にはいたりませんでした。

お力を貸して頂けると幸いです。
よろしくお願いします。

Comments

[m.ts10806]

> color:;

これ、実際のコードですか？

[tkst]

失礼しました。
画像情報が記述されていたので、修正致しました。
お手数お掛けしました。

Answer 1

1,中央揃いに関して

.creation__description {
  padding: 30px 200px;
  margin-top: 10px;
}

.creation__trigger {
  padding: 30px 200px;
  margin-top: 10px;
}

このpadding:30px 200pxが中央揃えに見える原因だと思われます。
padding:上下 左右;なわけですから、text_areaの上下30pxずつ、左右200pxずつ入力フォームの外枠より入力欄が空いているのかと。

2,文字幅について
さて、railsのform_withのヘルパーメソッドはinputやtextareaタグに変換されます。
textareaタグにはrows属性やcols属性でフォームの大きさや文字幅を決められます。
参照:https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea

form_withのtext_areaにはこれらを決定するオプションsizeがあります。
公式ドキュメント: https://railsdoc.com/page/text_area

フォームの幅(20x10)

f.text_area :comtent, size: "20x10"
⇒<textarea cols="20" id="page_content" name="page[content]" rows="10"></textarea>

これだと、20文字10行のtextareaが出来るというわけです。