Remove space below text_area-CodePudding

In my Rails 5 app I'm using Bootstrap for modal. Inside that modal I've got text_area under which I created a character counter. The issue is that I want to have this counter right below the text_area like this:

Right now I've got some space between instead

Form:

<%= form_for @note, :url => registrant_notes_path(@registrant), remote: true do |f| %>
  <div >
    <%= f.label :body, 'Add note' %>
    <%= f.text_area :body, maxlength: 1000, id: "review_text" %>
    <p class='error'><%= show_errors(@note, :body) %></p>

    <div >
      <span id="counter" data-maximum-length="1000"><%= 1000 %></span> chars left / 1000 character max
    </div>
    <%= f.hidden_field :administrator_id, value: current_login.id %>
    <%= f.hidden_field :registrant_id, value: @registrant.id %>
  </div>
  <div >
    <button type="button"  data-dismiss="modal">Close</button>
    <%= f.submit "Save", class: "btn btn-primary" %>
  </div>
<% end %>

css:

.modal-footer {
    border-top: 0 none;
}

.counter-text {
  border-top: 0 none;
  text-align: right;
}

#review_text {
  min-height: 54px;
  width: 100%;
}

[Edit]

After pasting images I discovered that text_field and buttons are not in the same line - text_field is a bit wider, is it possible for them to be the same?

CodePudding user response：

The additional space is caused by the empty <p> tag:

<p class='error'><%= show_errors(@note, :body) %></p>

<p> will occupy vertical space even if it has no contents (thus why its missused so widly). To get rid of it you should rewrite your helper method so that the tag is only generated if there are errors for that field.

def show_errors(object, attribute)
  return unless object.errors.key?(attribute)
  tag.p(class: 'error') do
    # ... do your thing
  end
end