0

コレクション/ドロップダウンのデフォルトの simple_form スタイルをオーバーライドしようとしていますが、ドロップダウンがページの幅全体を占めるため、幅を調整できません。

ここで提供されている css https://github.com/plataformatec/simple_form/wiki/CSS-for-simple_formをスタイルシートに追加し、ドロップダウンに適用するクラスを追加しました。

.simple_form div.input {
  margin-bottom: 10px;
  clear: both; /* Required for Webkit, but not for Gecko */
}

.simple_form label {
  float: left;
  width: 100px;
  text-align: right;
  margin: 2px 10px;
}

div.boolean, .simple_form input {
  margin-left: 120px;
}

.simple_form input.test {
  width: 30px;
}

Rails simple_form label_htmlからの情報を使用し、 SimpleForm を使用して各選択オプションにクラスを追加して機能させようとしましたが、テストクラスが追加されている間、class="select optional test" と表示されます。「オプションの選択」がどこから来ているのか、それを削除する方法がわかりません。

最終的に、結果の HTML は次のようになります。

 <div class="input select optional f_User">
   <label class="select optional" for="f_User">User</label>
     <select class="select optional test" id="f_User" name="f[User]">
       <option value=""></option>
       <option value="15">Shawn</option>
       <option value="87">Bob</option>
       <option value="88">John</option>
       <option value="89">Mary</option>
     </select>
 </div>

お時間をいただき、ご協力いただきありがとうございます。

4

1 に答える 1

1

クラスselectとoptionalは、選択ボックスのスタイルを設定するためにSimpleFormによって生成されたようです。カスタム ラッパーのコードを見ると、各入力タイプには、入力名に基づいて CSS が関連付けられています。つまり、select には class="select" などがあります。オプションのクラスは、特定のフィールドが必須かどうかなどのフィールド。本当にそれらを削除したい場合は、SimpleForm にモンキー パッチを適用してこれを実現するか、選択した CSS クラスでラップされたカスタムを作成する必要があるようです。

つまり、「選択」クラスの幅パラメーターを上書きできます。

.select {
  width: 30px;
}
于 2013-06-07T15:57:17.687 に答える