💡

細かい修正点集(バリデーション/table)

2023/08/25に公開

Bootstrap

Rails

tech

はじめに

不足箇所を修正している中で、初歩的だけど忘れがちな内容やちょっと詰まったところを集めてまとめてみました！

リロードしないと投稿/編集できないちょっとした不具合

カテゴリの新規登録をする動作の際リロードしないとボタンを押しても何も起こらない。
form_withを親要素の外に書いていなかったことが原因でした。
これを

<table class="row my-5 ml-1">
    <tr>
      <%= form_with model: @category, url: admin_categories_path, method: :post do |f| %>
      <td class="pr-3"><b><%= f.label "カテゴリ名" %></b></td>
      <td class="pr-3"><%= f.text_field :name %></td>
      <td class="pr-4"><%= f.submit "新規登録", class: "btn btn-primary" %></td>
      <% end %>
    </tr>
  </table>

このように変更することで解決しました。

<%= form_with model: @category, url: admin_categories_path, method: :post do |f| %>
  <table class="row my-5 ml-1">
    <tr>
      <td class="pr-3"><b><%= f.label "カテゴリ名" %></b></td>
      <td class="pr-3"><%= f.text_field :name %></td>
      <td class="pr-4"><%= f.submit "新規登録", class: "btn btn-primary" %></td>
    </tr>
  </table>
  <% end %>

バリデーションでエラー表示がされるとレイアウトが崩れてしまう

バリデーションでエラー表示がされるとフォーム部分が崩れてしまうので修正点をまとめました。
原因としてはエラーが発生している時、Railsが自動的に<div class="field_with_errors"></div>が発生するからです。
解決方法としては2つあります。
①cssで以下のように記述する

application.css

.field_with_errors {
  display: inline;
}

これだと微妙に間隔があいてしまうのでレイアウト次第で調整が必要です。
②完全に取り除く場合は以下のように記述します。

config/application.rb

config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag }

これで<div class="field_with_errors"></div>が自動で発生しなくなります。

tableをレスポンシブ対応させる方法

Bootstrap 5 の table は、以下のようにtable-responsiveのクラスで table タグを囲むことでレスポンシブにできると公式ドキュメントには書かれています。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

基本的にはこの書き方でtable1をレスポンシブ対応させることができますが、設定によっては<div class="table-responsive">が効かないように思われます。
今回使用した対処法はこちらになります。

text-nowrap のクラス名を追記して対処

table タグにtext-nowrapのクラス名をつけることでレスポンシブになりました。

<div class="table-responsive">
  <table class="table text-nowrap">
    ...
  </table>
</div>

これにより上記は「要素内で改行しない」という指定をすることができます。
この指定により表内の文字が改行されなくなり、レスポンシブになるようです。

参考にさせていただいた記事

https://workabroad.jp/posts/2155

まとめ

初期の段階で学習した内容でも深堀すると実装不足な部分やもう一工夫できることがどんどん出てくるのでコツコツできることの幅を広げていきたいと思います。