CSSをレールフォームヘルパーに追加

レールフォームヘルパーにCSSクラスを追加したいと思います。しかし、cssクラスは入力タグの周りのdivで使用されることを意図しています。だからこそ、スライダーにスタイルが適用されないのです。フォーム内側CSSをレールフォームヘルパーに追加

オリジナル構文：formタグ内部

<div class="range range--light"> 
      <input type="range" data-init="auto" id="slider3" min="0" max="100" value="<%= @subproject_value1 %>" step="1"> 
      <output for="slider3">0</output> 
</div>

markup

レールフォームヘルパー：

<%= range_field(:subproject, :ans1, in: 1..100, :class => "range range--light") %>

form helper

EDIT：イメージを追加

出典

2017-05-31 JustusP

あなたが入力周りdiv要素は、その後、あなたは、単にあなたのテンプレートでそれをマークアップし、その中の実際のフォームヘルパーを持つことができることが必要な場合：

<div class="range range--light"> 
    <%= range_field(:subproject, :ans1, in: 1..100, id: 'slider3'%> 
    <output for="slider3">0</output> 
</div>

出典

2017-05-31 12:11:41

ありがとうございます、私はあなたがフォームタグで通常のマークアップを持つことができないか分かりませんでした。しかし、それはまだそれをスタイルしません。 – JustusP

スタイリングにどのライブラリを使用しているのかわかりません。 cssファイルとjsファイルがアセットパイプラインにあり、ソースとしてデバッグコンソールに表示されていることを確認しましたか？また、JSが関与している場合は、まずそれを開始する必要があります。これは本当に多くの情報を持っていなくても見つけるのは難しいです。 –

カスタム内部ライブラリです。すべてのアセットは適切なディレクトリにあり、デバッグ時にソースとして表示されます。 – JustusP

私はちょうどrange_fieldタグ

に :'data-init' => 'auto'を追加する必要がありました

出典

2017-06-02 09:10:27 JustusP

CSSをレールフォームヘルパーに追加

答えて

関連する問題