Высота для начальной загрузки text_area не применяется должным образом - PullRequest
Новая
       6

Высота для начальной загрузки text_area не применяется должным образом

0 голосов
/ 11 мая 2018

У меня есть форма WIP, для которой я хочу расширить текстовую область.Тем не менее, когда я применяю высоту, она применяется скорее как поле, чем как фактическая высота.Если я отредактирую CSS после того, как страница будет отображена, она будет работать правильно.

С height: 12.5 enter image description here

Теперь, когда я проверяю консоль, я замечаю, что height: 12.5rem отсутствует.Однако, если я добавлю его, страница будет отображаться правильно.

enter image description here

Я использую бутстрап 4 и рельсы.Соответствующий код указан ниже.

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>

Как я могу решить эту проблему?Спасибо

1 Ответ

0 голосов
/ 11 мая 2018

Это потому, что вы нацелены на родительский элемент.Попробуйте вместо этого: 

.text_form textarea {
  height: 12.5rem;
}

Ресурс, если вам нужна дополнительная помощь с элементами текстовой области: https://css -tricks.com / textarea-tricks /

...