CODEWITHSUNDEEP
htmlcssruby-on-railsforms
alopez02
alopez02

Reputation: 1524

No automatic line break when exceeding textarea in form input field

I have a form with an input field for a string. I resized the 'textarea' height to fit with the style I'm trying to achieve but I found two unexpected problems which I haven't been able to fix.

  1. The text input and placeholder values are centred vertically in the textarea. I'd like them to be rendered on the top of the 'textarea'. I've tried modifying margins and paddings of the element and its parents without success.

  2. When the text input exceeds the 'textarea' horizontally, it is rendered in a long single line instead of being broken into new lines as I'd like it to be.
    I've tried adding overflow-x: scroll; to the element without success.

What am I missing to achieve the results I'm aiming for?

A relevant segment of my code here

My form

    <%= 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 %>

application scss

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

}

An image of the form to illustrate the problem here

PS. I'm using Rails plus Simple Form gem, though I assume this is a pure CSS/HTML issue

UPDATE: As requested the rendered form

    <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>

Upvotes: 0

Views: 456

Answers (1)

XYZ
XYZ

Reputation: 27397

It does not look like a textarea but a input with text type.

Base on the Simple Form's documentation, 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 %>

try to add as: :text to your simple_form_for helper.

Upvotes: 3

Related Questions