मेरे पास एक डब्ल्यूआईपी फॉर्म है जिसके लिए मैं एक टेक्स्ट क्षेत्र का विस्तार करना चाहता हूं। हालांकि, जब मैं ऊंचाई लागू करता हूं तो यह वास्तविक ऊंचाई की तुलना में मार्जिन की तरह अधिक लागू होता है। यदि मैं पृष्ठ को प्रस्तुत करने के बाद सीएसएस संपादित करता हूं तो यह ठीक से काम करता है।

height: 12.5 के साथ यहां छवि विवरण दर्ज करें

अब जब मैं कंसोल की जांच करता हूं तो मुझे पता चलता है कि height: 12.5rem अनुपस्थित है। हालांकि, अगर मैं इसे जोड़ता हूं, तो पृष्ठ ठीक से प्रस्तुत होता है।

enter image description here

मैं बूटस्ट्रैप 4 और रेल का उपयोग कर रहा हूँ। प्रासंगिक कोड नीचे दिया गया है।

संदेश.एससीएसएस

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

मैं इस समस्या को कैसे ठीक करुं? धन्यवाद

0
frillybob 11 मई 2018, 05:18

1 उत्तर

सबसे बढ़िया उत्तर

ऐसा इसलिए है क्योंकि आप मूल तत्व को लक्षित कर रहे हैं। इसके बजाय इसे आजमाएं:

.text_form textarea {
  height: 12.5rem;
}

संसाधन यदि आपको टेक्स्ट क्षेत्र तत्वों के साथ अधिक सहायता की आवश्यकता है: https://css-tricks.com/textarea-tricks /

1
Ibrahim Tareq 11 मई 2018, 05:44