bootstrap text_area 的高度应用不正确
Height for bootstrap text_area not applying properly
我有一个 WIP 表单,我想为其扩展一个文本区域。但是,当我应用高度时,它更像是边距而不是实际高度。如果我在页面呈现后编辑 CSS 它可以正常工作。
与height: 12.5
现在,当我检查控制台时,我注意到 height: 12.5rem
不存在。但是,如果我添加它,页面会正确呈现。
我正在使用 bootstrap 4 和 rails。下面提供相关代码。
messages.scss
#message_form{
margin-left: 4.0rem;
// Only visible with smaller screen sizes
margin-right: 4.0rem;
margin-top: 2.0rem;
margin-bottom: 2.0rem;
width: 50%;
}
.text_form{
height: 15rem !important;
}
_form.html.erb
<div id="message_form">
<%= form_with(model: message, local: true) do |form| %>
<%# Error message setup %>
<% if message.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(message.errors.count, "error") %> prohibited this message from being saved:</h2>
<ul>
<% message.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<%# Form setup %>
<%# Message Title %>
<div class="form-group">
<%= form.label :message_name %>
<%= form.text_field :message_name, id: :message_message_name, :class=>"form-control" %>
</div>
<%# Message Context %>
<div class="form-group text_form">
<%= form.label :text %>
<%= form.text_area :text, id: :message_text, :class=>"form-control" %>
</div>
<%# Message send time %>
<div class="form-group">
<%= form.label :date_and_time_to_send %>
<%= form.text_field :date_and_time_to_send, id: :message_date_and_time_to_send, :class=>"form-control" %>
</div>
<%# Actions to perform %>
<div class="actions">
<%= form.submit 'Send Now', :class=>'btn btn-primary btn-block'%>
<%= form.submit 'Save to Database', :class=>'btn btn-primary btn-block'%>
</div>
<% end %>
</div>
我该如何解决这个问题?谢谢
这是因为您定位的是父元素。试试这个:
.text_form textarea {
height: 12.5rem;
}
如果您需要有关文本区域元素的更多帮助,请参考资源:https://css-tricks.com/textarea-tricks/
我有一个 WIP 表单,我想为其扩展一个文本区域。但是,当我应用高度时,它更像是边距而不是实际高度。如果我在页面呈现后编辑 CSS 它可以正常工作。
与height: 12.5
现在,当我检查控制台时,我注意到 height: 12.5rem
不存在。但是,如果我添加它,页面会正确呈现。
我正在使用 bootstrap 4 和 rails。下面提供相关代码。
messages.scss
#message_form{
margin-left: 4.0rem;
// Only visible with smaller screen sizes
margin-right: 4.0rem;
margin-top: 2.0rem;
margin-bottom: 2.0rem;
width: 50%;
}
.text_form{
height: 15rem !important;
}
_form.html.erb
<div id="message_form">
<%= form_with(model: message, local: true) do |form| %>
<%# Error message setup %>
<% if message.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(message.errors.count, "error") %> prohibited this message from being saved:</h2>
<ul>
<% message.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<%# Form setup %>
<%# Message Title %>
<div class="form-group">
<%= form.label :message_name %>
<%= form.text_field :message_name, id: :message_message_name, :class=>"form-control" %>
</div>
<%# Message Context %>
<div class="form-group text_form">
<%= form.label :text %>
<%= form.text_area :text, id: :message_text, :class=>"form-control" %>
</div>
<%# Message send time %>
<div class="form-group">
<%= form.label :date_and_time_to_send %>
<%= form.text_field :date_and_time_to_send, id: :message_date_and_time_to_send, :class=>"form-control" %>
</div>
<%# Actions to perform %>
<div class="actions">
<%= form.submit 'Send Now', :class=>'btn btn-primary btn-block'%>
<%= form.submit 'Save to Database', :class=>'btn btn-primary btn-block'%>
</div>
<% end %>
</div>
我该如何解决这个问题?谢谢
这是因为您定位的是父元素。试试这个:
.text_form textarea {
height: 12.5rem;
}
如果您需要有关文本区域元素的更多帮助,请参考资源:https://css-tricks.com/textarea-tricks/