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

Question

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

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

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;

}

PS。我正在使用 Rails 和 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

例如，在数据库中以 :text 类型创建的列将默认使用 textarea 输入。

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

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