基础,简单形式,文本区域,列

Question

我有一个Zurb Foundation简单表单,其中一个字段(:description)是一个文本区域.我希望文本区域为10行深,但它显示为2行.有谁知道如何改变这个？

<div class="row">
  <div class="large-4 large-centered columns">
    <%= simple_form_for(@venue) do |f| %>
      <fieldset>
        <%= f.input :name %>
        <%= f.input :url %>
        <%= f.input :street %>
        <%= f.input :city %>
        <%= f.input :state %>
        <%= f.input :description, as: :text, :input_html => { :cols => 5, :rows => 10 } %>
        <%= f.submit "Submit", class: "button small radius" %>
      </fieldset>
    <% end %>
  </div>
</div>

Answer 1

由于您使用的是bootstrap,因此bootstrap的默认属性适用于您的输入textarea.它导致了这个问题.我有同样的问题,但是,有列.

您可以通过两种解决方案克服此问题:

1.)创建一个类并指定高度和宽度为auto.在需要的地方使用该类.

在application.css或任何css文件中创建此类.

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

现在在ruby代码中使用此类.

 <%= f.input :description, as: :text, :input_html => { class: 'test', :cols => 5, :rows => 10 } %>

由于您已明确指定宽度和高度为auto,因此引导程序的textarea宽度,高度将被本地类的"test"宽度和高度覆盖.因此:cols => 5,:rows => 10个属性将被设置.

2.)修改bootstrap css文件中的输入textarea属性.如果要在任何地方使用相同的宽度和高度,请将输入textarea的高度或宽度更改为auto以避免混淆或将其设置为标准像素.

Answer 2

课堂作业不起作用，请尝试这个

=f.input :description, label: false, :as => :text, :input_html => { :rows => 7 , :style => 'width: 100%'}

gre8 适合我。！