0

問題: formtastic の元の css ファイルはどこにありますか?

理由:テキスト フォームの「幅」は、自動的に何らかの値に設定されているように見えるため、変更できません。すべてのテキストフォームの幅を強制するかどうか、元の css ファイルを確認したい。

環境： 

group :assets do
 gem 'sass-rails',   '~> 3.2.3'
 gem 'coffee-rails', '~> 3.2.1'
 gem 'bootstrap-sass'
 gem 'formtastic-bootstrap'

テキストフォームの幅を変更できない理由（サイズ、列属性が機能しない）に対する直接の答えを誰かが知っている場合は、その答えをもっといただければ幸いです。ご協力ありがとうございました！

画像：

ここに画像の説明を入力

_form.html.erb

 <% @post = Post.new %>
 <%= semantic_form_for @post do |f| %>
  <%= f.inputs do %>
    <%= f.input :name, :hint => "enter your name", :input_html => { :rows => 10, :width => 10 } %>
    <%= f.input :content, :hint => "enter the content", :input_html => { :rows => 10, :width => 100000 } %>

<% end %>
<%= f.actions do %>
    <%= f.action :submit, :as => :button %>
    <%= f.action :cancel, :as => :link %>
<% end %><% end %></div>

HTML:

<form accept-charset="UTF-8" action="/posts" class="formtastic post" id="new_post" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="wFcjDR0nzm2B3yl2XtUxzlQz0CWplYf2nKiq+xgDpXo=" /></div>

<fieldset class="inputs">
<div class="string input required stringish control-group" id="post_name_input"><label class=" control-label" for="post_name">Name<abbr title="required">*</abbr></label><div class="controls"><input id="post_name" maxlength="255" name="post[name]" rows="10" type="text" width="10" /><span class="help-block">enter your name</span></div></div>

<div class="text input required control-group" id="post_content_input"><label class=" control-label" for="post_content">Content<abbr title="required">*</abbr></label><div class="controls"><textarea id="post_content" name="post[content]" rows="10" width="100000"></textarea><span class="help-block">enter the content</span></div></div></fieldset>

概要:これはなぜですか? また、formtastc.css ファイルはどこにありますか? アセットフォルダーにはありませんが、ページはどういうわけかcssをロードしています。

4

1 に答える 1

1

Formtastic.css ファイルは開発者のアセットにあります (gem にあるため、Windows エクスプローラーで確認することはできません。

Formtastic.css

ここで、以下のコードが問題を引き起こしていました

/* TEXTAREA OVERRIDES
---------------------------------------------------------------------------------*/
.formtastic .text textarea {
  width:72%;
}

.formtastic .text textarea[cols] {
  width:auto;
  max-width:72%;
}

幅を修正しようとする代わりに、クラススパンを使用して問題を解決しました。ただし、独自の css を追加して幅を変更することもできます。私の意見では、同じ結果が得られます。

<%= f.input :content, :label => 'content', :input_html => {  :rows => 5, :class => 'span10' } %>
于 2012-11-17T09:22:49.207 に答える