【问题标题】:can't change the height of a text field in simple_form无法更改 simple_form 中文本字段的高度
【发布时间】:2025-12-17 03:35:01
【问题描述】:

我试过了

  #Default size for text inputs.  
  config.default_input_size = 10

来自 config/initializers/simple_form.rb

我也试过<%= f.input :message, :input_html => {:size => 10} %>

但是这些都没有改变我的文本字段的显示方式。

【问题讨论】:

  • 您需要阅读有关 HTML 和 CSS 的更多信息。 size 改变宽度(种类),而不是高度。使用 CSS 进行更多控制。
  • <%= f.text_area :message, rows: 10 %>

标签: ruby-on-rails height simple-form textfield


【解决方案1】:

你需要这样做

<%= f.input :message, :input_html => {:rows => 10} %>

Html 文本区域标签属性有两个属性,即rowscols,可让您指定文本区域的行数和列数(即宽度)。如果这不起作用,请打开控制台并查看您的 css 是否覆盖了高度。

【讨论】:

  • 我尝试了&lt;%= f.input :message, :input_html =&gt; {:cols =&gt; 20} %&gt; 的一些“宽度”值,但它没有改变。我查看了源代码,似乎我的字段被&lt;div class="col-sm-9"&gt; 包裹。有关如何更改默认样式的任何建议?
【解决方案2】:

传递 :input_html 选项会覆盖默认值。您必须检查可以修改其行为的 css 类的属性值。

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

【讨论】:

    【解决方案3】:

    我设法通过将:as =&gt; :text 添加到输入字段属性然后将样式和行添加到输入html 来做到这一点:

    <%= f.input :message, label: "Message: ", :as => :text, input_html: { :style=> 'width: 100%;', :rows => 4} %>
    

    对我来说,是 :as =&gt; :text 让“行”属性起作用,100% 的宽度使它变得流畅而不是固定宽度。

    【讨论】:

      【解决方案4】:

      如果要改变“高度”,需要修改css属性:

      <%= f.input :message, input_html: {style: 'height:10px;'} %>
      

      【讨论】:

        【解决方案5】:

        老问题,我知道。这就是 SimpleForm 3.2.0 和 Rails 4.2.3 对我有用的:

        <%= f.input_field :field_name, as: :text, class: "my-custom-class", rows: 5 %>
        

        【讨论】:

          【解决方案6】:

          你可以的

          <%= f.input :message, :size => "10x10" %>
          

          高度和宽度。

          它可能适用于文本字段,但绝对适用于text_area。无论如何,您可能都希望使用 text_area 作为消息。

          【讨论】:

          • input_html: { size: "100x10" }
          【解决方案7】:

          尝试使用 Google Chrome 中的 Firebug 或 Code Inspector 检查 text_field 元素,查看确切的类名并直接在样式表文件中进行更改。

          【讨论】:

            【解决方案8】:

            我刚刚在 Rails 5.1 和 Bootstrap4 上遇到了同样的问题。 我做了以下事情:

            &lt;%= f.input :bio, input_html: {style: 'height:200px !important;'} %&gt;

            它有效。

            【讨论】: