在我的 Rails 5 應用程式中，我將 Bootstrap 用于模態。在那個模式text_area中，我創建了一個字符計數器。問題是我想在 text_area 下方有這個計數器，如下所示：
現在我之間有一些空間
形式：
<%= form_for @note, :url => registrant_notes_path(@registrant), remote: true do |f| %>
<div class="text-note">
<%= f.label :body, 'Add note' %>
<%= f.text_area :body, maxlength: 1000, id: "review_text" %>
<p class='error'><%= show_errors(@note, :body) %></p>
<div class="counter-text">
<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 class="modal-footer">
<button type="button" class="btn btn-default" 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%;
}
[編輯]
粘貼影像后，我發現 text_field 和按鈕不在同一行 - text_field 有點寬，它們可能相同嗎？
uj5u.com熱心網友回復：
額外的空間是由空<p>標簽引起的：
<p class='error'><%= show_errors(@note, :body) %></p>
<p>即使它沒有內容也會占據垂直空間（這就是為什么它被如此廣泛地濫用）。要擺脫它，您應該重寫您的輔助方法，以便僅在該欄位存在錯誤時生成標記。
def show_errors(object, attribute)
return unless object.errors.key?(attribute)
tag.p(class: 'error') do
# ... do your thing
end
end
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/410569.html
標籤：
上一篇：將按鈕與textarea角對齊