5

我有一个 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>
4

2 回答 2

9

由于您使用的是引导程序，引导程序的默认属性适用于您的输入文本区域。它会导致问题。我有同样的问题，但是有列。

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

1.）创建一个类并将高度和宽度指定为自动。在需要的地方使用类。

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

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

现在在你的 ruby​​ 代码中使用这个类。

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

由于您已将宽度和高度明确指定为自动，因此引导程序的 textarea 宽度和高度将被本地类“测试”宽度和高度覆盖。因此 :cols => 5, :rows => 10 属性将被设置。

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

于 2013-07-05T05:56:13.693 回答
4

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

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

为我工作 gre8。！

于 2013-10-08T17:36:30.273 回答