Question

我有一个带字符串输入字段的表单。我调整了＆＃39; textarea＆＃39;高度与我试图达到的风格相符，但我发现了两个我无法解决的意外问题。

文本输入和占位符值在textarea中垂直居中。我希望他们能够呈现在＆＃39; textarea＆＃39;的顶部。我尝试修改元素及其父元素的边距和填充值但没有成功。
当文字输入超过＆＃39; textarea＆＃39;在水平方向上，它被渲染成一条很长的单行而不是被分成新的行，因为我喜欢它。
我尝试在元素中添加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，而是input类型text。

基于Simple Form的文档https://github.com/plataformatec/simple_form

例如，在数据库中使用type：text创建的列默认情况下将使用textarea输入。

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

尝试将as: :text添加到您的simple_form_for帮助程序。

在表单输入字段

1 个答案: