5

1 つのフィールド (:description) がテキスト領域である Zurb Foundation の単純なフォームがあります。テキスト領域の深さを 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

ブートストラップを使用しているため、ブートストラップのデフォルト プロパティが入力テキストエリアに適用されます。それは問題を引き起こします。同じ問題がありましたが、列がありました。

この問題は、次の 2 つの解決策で解決できます。

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 に明示的に指定したため、ブートストラップのテキストエリアの幅と高さは、ローカル クラス'test' の幅と高さによってオーバーライドされます。したがって、:cols => 5、:rows => 10 のプロパティが設定されます。

2.) ブートストラップ css ファイルで入力テキストエリアのプロパティを変更します。入力テキストエリアの高さまたは幅を auto に変更して混乱を避けるか、どこでも同じ幅と高さを使用する場合は標準ピクセルに設定します。

于 2013-07-05T05:56:13.693 に答える