11

私は RoR を使用しており、フォームには Simple_Form gem を使用しています。ユーザーが複数のロールを持つことができるオブジェクト関係があり、作成中に管理者は新しいユーザーに適用するロールを選択できます。役割のチェックボックスを左側に、名前を右側に水平に配置したいと思います。

// 「ボックス」管理者 //

現在の代わりに

///

"箱"

管理者

///

ロールを表示する現在のコードはこれです。

  <div class="control-group">
    <%= f.label 'Roles' %>
    <div class="controls">
      <%= f.collection_check_boxes 
                 :role_ids, Role.all, :id, :name %>
    </div>
  </div>

私が最も夢中になっている部分は、f.collection_check_boxes がこのようなコードを生成するという事実です。

<span>
  <input blah blah />
  <label class="collection_check_boxes" blah>blah</label>
</span>

触れる必要がある3つのコンポーネントがあるため、そこにcssクラスを取得するのが難しくなります。:html ハッシュにダミー クラスなどを追加しようとしましたが、ダミー クラスはレンダリングされた html にも表示されません。

どんな助けでも大歓迎です

編集:解決策

Baldrick のおかげで、私の作業中の erb は次のようになります。

<%= f.collection_check_boxes :role_ids, Role.all, :id, :name,
      {:item_wrapper_class => 'checkbox_container'} %>

そして、私のCSSは次のとおりです

.checkbox_container {
  display: inline-block;
  vertical-align: -1px;
  margin: 5px;
 }
.checkbox_container input {
  display: inline;
 }
.checkbox_container .collection_check_boxes{
  display: inline;
  vertical-align: -5px;
 }
4

4 に答える 4

9

collection_check_boxesのドキュメントによるとitem_wrapper_class、チェックボックスを含むスパンにcssクラスを与えるオプションがあります。そのように使用してください

<%= f.collection_check_boxes :role_ids, Role.all, :id, :name, :item_wrapper_class => 'checkbox_container' %>

また、チェックボックスとラベルを同じ行に保持するためのCSSスタイル:

.checkbox_container input {
  display: inline;
}
于 2013-01-03T20:07:37.573 に答える
5

ブートストラップ オプションを使用してインストールされた、bootstrap-saas の 2.3.1.0 を使用する SimpleForm の最新の 2.1.0 ブランチでは、collection_check_boxes メソッドにより、インライン アイテム ラッパー クラスを適用しても効果のないスパンがいくつか発生しました。

標準入力、コレクション、:as => :check_boxes 方法論を使用して、フォームを完全に整列させることができました。その後、インライン スタイルは完全に機能しました。

<%= f.input :roles, :collection => valid_roles, :label_method => :last, :value_method => :first, :as => :check_boxes, :item_wrapper_class => 'inline'  %>

私の役割は、たまたま、値、ラベルを持つ配列の単純な配列です。お役に立てれば。

于 2013-03-24T10:30:52.497 に答える
3

Bootstrapを使用すると、次のことができます。

<%= f.collection_check_boxes :role_ids, Role.all, :id, :name, :item_wrapper_class => 'inline' %>
于 2013-03-09T04:57:16.253 に答える