Question

我有一些用户可以填写的字段（例如姓名，电话号码，公司）。文本框的尺寸很好，除了一个，这是一个＆＃34;注意＆＃34;领域。我希望与其他文本框字段相比，注释文本框非常大，但我只能使所有文本框的大小相同。

_form.html.erb /供应商

<%= form_for @vendor do |f| %>

#this text field will be a regular size
  <p>
    <%= f.label :company %><br>
    <%= f.text_field :company %>
  </p>

#more code...

#I want this text field to be large
 <body>
     <div class = "notes">
         <p>
             <%= f.label :notes %><br>
             <%= f.text_field :notes %>
        </p>
     </div>
 </body>

  <p>
    <%= f.submit %>
  </p>

</div>  

<% end %>

我的css文件

input[type=text]{
    width: 40%;
    padding: 12px 12px;
    border: 2px solid #ccc;
    background-color: white;
}


textarea {
    width: 20%;
    height: 10px;
    padding: 12px 12px;
    border: 2px solid #ccc;
    background-color: white;
    resize: none
}

#more code...

Answer 1

您可以为input添加一个具有所需样式（宽度）的类：

.large-box {
  width: 60% !important;
}

然后，将其添加到您的input：

<%= f.text_field :notes, class: "large-box" %>

Answer 2

使用cols和rows属性。 <%= f.text_area :notes, :cols => "10", :rows => "10" %> 您也可以指定大小：<%= f.text_area :notes, size: "60x12" %>

使文本框大小不同

2 个答案: