css - 如何使用 simple_form_for 更改 Rails 应用程序中文本区域的大小和位置？

我使用 Simple Form Gem 在我的 Rails 应用程序中创建了一个表单。 14 个字段中的 3 个是文本区域输入字段(字段 4、5 和 6)。但是，当显示表单时，会出现一些意想不到的行为；大多数字段按预期的垂直顺序显示，但 3 个文本区域字段都出现在屏幕的正中间，实际上部分覆盖了字段 2 和 3。宽度也大于屏幕宽度，这会导致滚动条出现在页面底部。它们应该是小文本区域输入字段，每个输入字段都按照正确的顺序跟在其他输入字段之后。下面我列出了解决问题的尝试。

我使用的是 rails 5.1.5 和 ruby 2.2.6。此外，我正在使用 Bootstrap 3。

这里是 partial _form.html.erb 的形式。

<%= simple_form_for(@questionnaire) do |f| %>
  <%= f.error_notification %>
  <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>

  <div class="form-inputs">
    <%= f.input :name %>
    <%= f.input :dob %>
    <%= f.input :q1 %>
    <%= f.input :q2 %>
    <%= f.input :q3 %>
#3 fields below are causing the problems (q4, q5, q6)
    <%= f.input :q4 %>
    <%= f.input :q5 %>
    <%= f.input :q6 %>

    <%= f.input :q7 %>
    <%= f.input :q8 %>
    <%= f.input :q9 %>
    <%= f.input :q10 %>
    <%= f.input :q11 %>
    <%= f.input :q12 %>
  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

架构.rb

ActiveRecord::Schema.define(version: 20180516082217) do

  create_table "questionnaires", force: :cascade do |t|
    t.string "name"
    t.date "dob"
    t.string "q1"
    t.string "q2"
    t.string "q3"
    t.text "q4"
    t.text "q5"
    t.text "q6"
    t.boolean "q7"
    t.boolean "q8"
    t.boolean "q9"
    t.integer "q10"
    t.integer "q11"
    t.integer "q12"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

end

我尝试了很多方法来尝试改变文本区域的大小和位置。我设法使用

改变了高度

<%= f.input :q4, as: :text, input_html: {rows: 10, cols: 10}  %>

然而，这对宽度或位置都没有影响，但确实改变了高度我还尝试添加自己的 css，将 View 更改为:

<%= simple_form_for(@questionnaire) do |f| %>
  <%= f.error_notification %>
  <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>

  <div class="form-inputs">
    <%= f.input :name %>
    <%= f.input :dob %>
    <%= f.input :q1 %>
    <%= f.input :q2 %>
    <%= f.input :q3 %>
 </div>

 <div class="test">
    <%= f.input :q4 %>
    <%= f.input :q5 %>
    <%= f.input :q6 %>
 </div>

 <div class="form-inputs">
    <%= f.input :q7 %>
    <%= f.input :q8 %>
    <%= f.input :q9 %>
    <%= f.input :q10 %>
    <%= f.input :q11 %>
    <%= f.input :q12 %>
  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

和questionnaires.scss中的

.test
{
width: 300px;
height: auto;
}

我通过改变部分解决了定位问题

<%= f.input :q4 %>

到:

<%= f.input :q4, as: :string %>

这解决了定位问题，所有字段的顺序和位置都正确，但现在输入是字符串输入(单行)，我更愿意为这些字段输入文本。是什么导致 text_area 输入出现在屏幕中间并且不响应我所做的更改？我现在想不出任何更多的解决方案，所以希望能有任何新的观点。

编辑:错误表单生成的 HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrapp3</title>
    <meta name="description" content="Bootstrapp3">
    <link rel="stylesheet" media="all" href="/assets/application.self-d2524d97bf4870944294b74c7946b5c906e242a64430eba3b848a35f540a6bc4.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/1st_load_framework.self-7ba93f5c54e2609dc56add26ceaa59022bd2ba0732f4cb166c1a4e5c403039e4.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/slide_show.self-4df0b8ec94d4a18b8649e9fa49695c40b8ba8e8eee05dc626c8098e25f5f88b7.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/custom.self-82abd4a5838a43d3c64acce597602498accb1f77044da752ff13fe94fbd5c47c.css?body=1" data-turbolinks-track="reload" />
    <script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/rails-ujs.self-8944eaf3f9a2615ce7c830a810ed630e296633063af8bb7441d5702fbe3ea597.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/transition.self-6ad2488465135ab731a045a8ebbe3ea2fc501aed286042496eda1664fdd07ba9.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/alert.self-742145c5bb847aafdadc6e339be795628f8bc25f177e851f03a8c42278eb0312.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/button.self-126ac9bf0e7f2d8568f8da3a00fd5f0fac6eae0946331003370161fbf8d7975e.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/carousel.self-e47323f363ceb3dc0bdbce05e36e709ed428e339833a41140a85cb0af24b8127.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/collapse.self-2eb697f62b587bb786ff940d82dd4be88cdeeaf13ca128e3da3850c5fcaec301.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/dropdown.self-561cca1cbaf67474e01e9536f106bad541594860a6df997004591c1c1957a147.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/modal.self-3e78617ade5663314b7ee0ea10375a5b34d59ffbade44939e3f2a4e4ef2019b3.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/tab.self-5bf7078b682f8b131332eefa46b45fa5eff2eca745fc0d03e2991450888f7c28.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/affix.self-6d6f1a7fc5c8aabf3547fa1b794fab6268f54bc55ad815e55873c71f52513517.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/scrollspy.self-969f3c5f48cdf1e439c7fa1154c13b948715f5c689f87837c0b64521d3b46ef6.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/tooltip.self-05afb177e08f98997ccfc84fa08a215e4b27d48d5fe4d049080675e9dffd8199.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/popover.self-0aa93860b59fe7393f1dd490f54b3cb994f9d6155adffce034d4e14ae361b041.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/custom.self-797e6622a3c28029f3bcb1f4583be5560baa026079e90f8b18715e073cc58369.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/google_analytics.self-6388a897c429fdec3c71a1c7e52e25d012c306c14abc4dc6b943586cb9ab8287.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/questionnaires.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/application.self-12be097b9a2442b0b6cdcb5146d1d63c00abcde3675ff34d1de6126cb13e6714.js?body=1" data-turbolinks-track="reload"></script>
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="yGch+Mj/lnQ/fDuyaaDTw6wQPBsMjP+OkOQPqyg+du/saJ33BjyzSJULLTq21o3gZVwiuTr6arbroFUK4cOfYw==" />
  </head>
  <body>
    <header>
      <nav class="navbar navbar-inverse navbar-fixed-top bar" >
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Inicio</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="/pages/about">About</a></li>
<li><a href="/pages/page1">Skankometer</a></li>
<li><a href="/pages/page2">Page2</a></li>
<li><a href="/pages/contacto">Contacto</a></li>
<li><a href="/questionnaires/new">Questionnaire</a></li>

      </ul>
    </div>
  </div>
</nav>

    </header>
    <main role="main">

       <h1>New Questionnaire</h1>


<form novalidate="novalidate" class="simple_form new_questionnaire" id="new_questionnaire" action="/questionnaires" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="/bcZJCZ7UPxmLMpdbFevb+GCt69ylgmtdAJgAOZmeZQThlyu8SDMj9hKOu7RVI3cOyUYoDaE1dwryZIs8xEkTw==" />



  <div class="form-inputs">
    <div class="form-group string optional questionnaire_name"><label class="form-control-label string optional" for="questionnaire_name">Name</label><input class="form-control string optional" type="text" name="questionnaire[name]" id="questionnaire_name" /></div>
    <div class="form-group date optional questionnaire_dob"><label class="form-control-label date optional" for="questionnaire_dob_1i">Dob</label><div class="d-flex flex-row justify-content-between align-items-center"><select id="questionnaire_dob_1i" name="questionnaire[dob(1i)]" class="form-control mx-1 date optional">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018" selected="selected">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
<select id="questionnaire_dob_2i" name="questionnaire[dob(2i)]" class="form-control mx-1 date optional">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5" selected="selected">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="questionnaire_dob_3i" name="questionnaire[dob(3i)]" class="form-control mx-1 date optional">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16" selected="selected">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div></div>
    <div class="form-group string optional questionnaire_q1"><label class="form-control-label string optional" for="questionnaire_q1">Q1</label><input class="form-control string optional" type="text" name="questionnaire[q1]" id="questionnaire_q1" /></div>
    <div class="form-group string optional questionnaire_q2"><label class="form-control-label string optional" for="questionnaire_q2">Q2</label><input class="form-control string optional" type="text" name="questionnaire[q2]" id="questionnaire_q2" /></div>
    <div class="form-group string optional questionnaire_q3"><label class="form-control-label string optional" for="questionnaire_q3">Q3</label><input class="form-control string optional" type="text" name="questionnaire[q3]" id="questionnaire_q3" /></div>

    <div class="form-group text optional questionnaire_q4"><label class="form-control-label text optional" for="questionnaire_q4">Q4</label><textarea class="form-control text optional" name="questionnaire[q4]" id="questionnaire_q4">
</textarea></div>
    <div class="form-group text optional questionnaire_q5"><label class="form-control-label text optional" for="questionnaire_q5">Q5</label><textarea class="form-control text optional" name="questionnaire[q5]" id="questionnaire_q5">
</textarea></div>
    <div class="form-group text optional questionnaire_q6"><label class="form-control-label text optional" for="questionnaire_q6">Q6</label><textarea class="form-control text optional" name="questionnaire[q6]" id="questionnaire_q6">
</textarea></div>

    <fieldset class="form-group boolean optional questionnaire_q7"><div class="form-check"><input name="questionnaire[q7]" type="hidden" value="0" /><input class="form-check-input boolean optional" type="checkbox" value="1" name="questionnaire[q7]" id="questionnaire_q7" /><label class="form-check-label boolean optional" for="questionnaire_q7">Q7</label></div></fieldset>
    <fieldset class="form-group boolean optional questionnaire_q8"><div class="form-check"><input name="questionnaire[q8]" type="hidden" value="0" /><input class="form-check-input boolean optional" type="checkbox" value="1" name="questionnaire[q8]" id="questionnaire_q8" /><label class="form-check-label boolean optional" for="questionnaire_q8">Q8</label></div></fieldset>
    <fieldset class="form-group boolean optional questionnaire_q9"><div class="form-check"><input name="questionnaire[q9]" type="hidden" value="0" /><input class="form-check-input boolean optional" type="checkbox" value="1" name="questionnaire[q9]" id="questionnaire_q9" /><label class="form-check-label boolean optional" for="questionnaire_q9">Q9</label></div></fieldset>
    <div class="form-group integer optional questionnaire_q10"><label class="form-control-label integer optional" for="questionnaire_q10">Q10</label><input class="form-control numeric integer optional" type="number" step="1" name="questionnaire[q10]" id="questionnaire_q10" /></div>
    <div class="form-group integer optional questionnaire_q11"><label class="form-control-label integer optional" for="questionnaire_q11">Q11</label><input class="form-control numeric integer optional" type="number" step="1" name="questionnaire[q11]" id="questionnaire_q11" /></div>
    <div class="form-group integer optional questionnaire_q12"><label class="form-control-label integer optional" for="questionnaire_q12">Q12</label><input class="form-control numeric integer optional" type="number" step="1" name="questionnaire[q12]" id="questionnaire_q12" /></div>
  </div>

  <div class="form-actions">
    <input type="submit" name="commit" value="Create Questionnaire" class="btn" data-disable-with="Create Questionnaire" />
  </div>
</form>

<a href="/questionnaires">Back</a>

    </main>
  </body>
</html>

最佳答案

在网页上右击并使用“检查”功能查看 HTML 后，我能够看到文本区域元素继承了一个名为“.text”的 css 类，这里的属性是“position”被设置为“绝对”(或相对于包含 block 设置)。将此属性更改为“静态”解决了这个问题。

将我自己的 .text css 类添加到我的 custom.css.scss 文件中，如下覆盖了它从中获取此属性的 .text css 类

.text {
  position: static;
}

关于css - 如何使用 simple_form_for 更改 Rails 应用程序中文本区域的大小和位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50369226/

css - 如何使用 simple_form_for 更改 Rails 应用程序中文本区域的大小和位置？

上一篇：css - 素材 css 按钮切断图标

下一篇：css - Bootstrap 复选框出现在小屏幕上的提交按钮之前