【困っていること】
編集フォームとラベルを横並びにしてレイアウトを整えたいのですが崩れてしまいます。
【現状】
edit.html.erb
<div class="user-edit"> <%= form_for @user do |f| %> <% if @user.image.present? %> <%= image_tag @user.image.url(:medium), :class => "image-tag3" %> <% else %> <%= image_tag @user.image.url(:default_url), :class => "image-tag3" %> <% end %> <%= f.file_field :image, :class => "form-control edit-form" %> <p class="user-edit-p1">名前</p> <%= f.text_field :name, :class => "form-control edit-form" %> <p class="user-edit-p2">自己紹介</p> <%= f.text_area :self_introduction, :class => "form-control edit-form" ,:size => "27x5" %> <% end %> </div>
現状はこのように「名前」があってその下にフォームがあります。
それを「名前」の横にフォームとしたいと思います。
【試したこと】
<div class="user-edit"> <%= form_for @user do |f| %> <% if @user.image.present? %> --変更後-- <div class="form-inline"> <div class="form-group"> <label>名前</label> <%= f.text_field :name, :class => "form-control edit-form" %> </div> <div class="form-group"> <label>自己紹介</label> <%= f.text_area :self_introduction, :class => "form-control edit-form" ,:size => "27x5" %> </div> </div> <% end %> </div>
「名前」の横にフォームをおけましたが、「自己紹介」まで一緒に横並びになります。
【まとめ】
「名前」 text_field
「自己紹介」 text_area
↑このようにするにはどのようにすればいいでしょうか?
色々な参考サイトをみて試してみましたが、なかなかうまくいかず、現状無理やりラベルの横にフォームをもってきた感じになってます。フォームの幅もくずれたので、もっといい方法があるのかな?と思っています。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/10/26 12:19