🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Materialize

Materializeは、Googleが提唱するマテリアルデザインのサイト作成ができるCSSのフレームワーク。頻繁に使用されるスタイルが既に定義されており、優れたデザインのページを作成できます。また、レスポンシブWebデザインにも対応可能です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

0回答

1624閲覧

Materializeを使ったviewのcheckboxやformについて Rails

shiro123

総合スコア4

Materialize

Materializeは、Googleが提唱するマテリアルデザインのサイト作成ができるCSSのフレームワーク。頻繁に使用されるスタイルが既に定義されており、優れたデザインのページを作成できます。また、レスポンシブWebデザインにも対応可能です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2020/02/04 13:19

編集2020/02/04 17:15

Materializeを使ったviewのcheckboxやformについて Rails

Railsで投稿機能を持ったWebアプリケーションを作っています。
そこでUIのMaterializeを導入したのですが、導入前は問題なかったサブミットボタンや新しく入れたチェックボックスがどうしても機能せず困っています。
問題は2つあって新しく入れたチェックボックスの落とし込み方が分からないことと、チェックボックスのformタグがなぜかページ全体のformタグに反応してしまってサブミットボタンがformの外に出てしまって機能しなくなっていることです。

発生している問題・エラーメッセージ

これが導入前の問題なく動いていた投稿フォームです。

html

1<%= form_with(model: post, local: true) do |form| %> 2 <% if post.errors.any? %> 3 <div id="error_explanation"> 4 <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2> 5 6 <ul> 7 <% post.errors.full_messages.each do |message| %> 8 <li><%= message %></li> 9 <% end %> 10 </ul> 11 </div> 12 <% end %> 13 <div class="field"> 14 <%= form.label :title %> 15 <%= form.text_field :title %> 16 </div> 17 18 <div class="field"> 19 <%= form.label :content %> 20 <%= form.text_area :content %> 21 </div> 22 23 <%= form.file_field :image %> 24 25 <div class="check_box"> 26 <span>タグ</span> 27 <%= form.collection_check_boxes(:tag_ids, Tag.all, :id, :name) do |tag| %> 28 <div> 29 <%= tag.label do %> 30 <%= tag.check_box %> 31 <%= tag.text %> 32 <% end %> 33 </div> 34 <% end %> 35 </div> 36 37 <div class="actions"> 38 <%= form.submit %> 39 </div> 40<% end %>

html

1これがMaterialize導入後の投稿フォームです。 2 3<%= form_with(model: @post, local: true) do |form| %> 4 <% if post.errors.any? %> 5 <div id="error_explanation"> 6 <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2> 7 8 <ul> 9 <% post.errors.full_messages.each do |message| %> 10 <li><%= message %></li> 11 <% end %> 12 </ul> 13 </div> 14 <% end %> 15 16 <div class="field"> 17 <%= form.label :title %> 18 <%= form.text_field :title %> 19 <p>タイトルは15字以内です</p> 20 </div> 21 22 <div class="field"> 23 <%= form.label :content %> 24 <%= form.text_area :content %> 25 </div> 26 27 <%= form.file_field :image %> 28 29 <form action="#"> 30 <%= form.collection_check_boxes(:tag_ids, Tag.all, :id, :name) do |tag| %> 31 <p> 32 <label> 33 <input id="indeterminate-checkbox" type="checkbox" /> 34 <span>Indeterminate Style</span> 35 <%= tag.text %> 36 </label> 37 </p> 38 <% end %> 39  </form> 40 41 <div class="actions"> 42 <%= form.submit class: 'btn' %> 43 </div> 44<% end %>

試したこと

ネットで色々調べてみましたが、わかりませんでした。
ブラウザの検証を使って調べたところサブミットが機能しないのは、なぜか投稿フォーム外に出てしまっているからだというのはわかりました。

補足情報(FW/ツールのバージョンなど)

Materialize 1.0.0
Ruby 2.6.3
Rails6!
画像は導入後のフォームを検証で見たものです。
イメージ説明

追記:チェックボックスの方は単純にjavascriptの入れ忘れでした!サブミットの方は未だに動かないのでもしご存じの方はどうかよろしくお願いします!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/02/04 20:43

画像貼れてないようです。 あと、あくまでレイアウト上の話かと思いますので、ブラウザに表示させた後に「ソースを表示」で取得できるHTMLを提示された方が回答が得やすくなると思います。 私はMaterializeは個人的に重用してますが、Rubyは全くなので。
shiro123

2020/02/04 20:45

回答ありがとうございます! 確かにそうしたほうが見やすそうですね! 大変申し訳ないんですが、先ほど操作ミスでプロジェクトごと消してしまって... せっかく回答いただけたのにすみません
m.ts10806

2020/02/04 20:47

いえ、回答ではなく質問への追記修正依頼です。 >プロジェクトごと消してしまって よくわかりませんが、コードなら質問に提示されたものがあるので そこから復帰は難しくないのでは?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問