html - 在表单输入字段中超出文本区域时不会自动换行

Question

我有一个带有字符串输入字段的表单。我调整了“textarea”的高度以适应我想要实现的样式，但我发现了两个无法修复的意外问题。

1. 文本输入和占位符值在文本区域中垂直居中。我希望它们呈现在“文本区域”的顶部。我试过修改元素及其父元素的边距和填充，但没有成功。

2. 当文本输入水平超出“textarea”时，它会以长单行呈现，而不是像我希望的那样被分成新行。
   我尝试将 overflow-x: scroll; 添加到元素但没有成功。

为了达到我的目标，我还缺少什么？

我的代码的相关部分在这里

我的表格

    <%= simple_form_for(@post, remote: true, html: { class: 'form-inline', id: 'new_post_form'}) do |f| %>
      <div class="form-inputs">
        <%= f.input :content, :label => false, :placeholder => "   Say something here!", :required => true, :autofocus => true, :input_html => { id: "new_post_content_field", class: "garlic-auto-save" } %>

        <%= button_tag(type: 'submit', id: "save-btn", style:'background:transparent' ) do %>
            <br><i class="fa fa-paper-plane-o" aria-hidden="true" title="submit"; data-toggle="tooltip"; data-placement="rigth"></i>
        <% end %>
      </div>
    <% end %>

应用程序 scss

  #new_post_content_field {
  height: 100px;
  width: 200px;
  padding: 0;
  margin: 0;
  width: 100%;
  overflow-x: scroll;

附言。我正在使用 Rails plus Simple Form gem，尽管我认为这是一个纯粹的 CSS/HTML 问题

更新:根据要求呈现的表单

    <div id="new_post_div" class="hide">
      <form class="simple_form form-inline" id="new_post_form" novalidate="novalidate" enctype="multipart/form-data" action="/posts" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓">

    <div class="form-inputs">
        <div class="form-group string required post_content"><input class="form-control string required garlic-auto-save" id="new_post_content_field" autofocus="autofocus" required="required" aria-required="true" placeholder="   Say something here!" type="text" name="post[content]" data-com.agilebits.onepassword.user-edited="yes"></div>

        <button name="button" type="submit" id="save-btn" style="background:transparent">
            <br><i class="fa fa-paper-plane-o" aria-hidden="true" title="" ;="" data-toggle="tooltip" data-placement="rigth" data-original-title="submit"></i>
        </button>    </div>
      </form>
    </div>

Answer 1

它看起来不像textarea，而是一个text类型的input。

基于简单表单的文档，https://github.com/plataformatec/simple_form

For example, a column created with type :text in the database will use a textarea input by default.

<%= simple_form_for @user do |f| %>
  <%= f.input :description, as: :text %>
  <%= f.button :submit %>
<% end %>

尝试将 as: :text 添加到您的 simple_form_for 助手。