1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

simple_formのフォームを横並びに配置する方法

Posted at

#目標
simple_form で実装した入力フォームは改行されて表示されるが、例えば名前記入欄で性・名を分けてフォームを作成する場合に横並びに表示させたい。
複数方法はあるようだが、今回はbootstrapのグリッドシステムを利用して実現したので備忘録的に残しておく。

#修正前

hoge.html.slim
= simple_form_for @hoge, url: hoge_path, method: :patch do |f|
    = f.input :first_name, label:"苗字"
    = f.input :last_name:"名前"

これでは縦並びにフォームが表示される。

#修正後

hoge.html.slim
= simple_form_for @hoge, url: hoge_path, method: :patch do |f|
  .col-sm-4
    = f.input :first_name, label:"苗字"
  .col-sm-4
    = f.input :last_name:"名前"

bootstrapのグリッドシステムによってレイアウトを格子状に分解して配置してくれる。今回はカラム数が4+4 < 12 であるため、フォームが横並びに配置されるという仕組みである。

他にもsimple_formのstyleやclassを指定していい感じにできる方法もあるみたいだが、うまくいかなかった(圧倒的力不足)。
この記事とか
https://stackoverflow.com/questions/9985317/simple-form-for-rails-radio-button-inline
この記事
http://blueplanet42.info/2016/04/24/bootstrapform-vs-simpleform.html
が参考になりそう。

以下今回の参考記事
https://qiita.com/akatsuki174/items/53b7367b04ed0b066bbf

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?