Laravelのページネーションが横方向にはみ出る問題の解決方法(レスポンシブ対応)

LaravelにはDBから取得したレコード件数が多いときに自動でページネーションを作ってくれる機能がある。

app/HogeController.php
resouces/views/hoge.blade.php

Laravel 6.x データベース:ペジネーション

https://readouble.com/laravel/6.x/ja/pagination.html

非常に便利な機能である一方で、対象となるレコード件数が多いときにはページネーションが横長になり過ぎてしまい、スマホなど画面幅の小さいデバイスで閲覧したときにページネーションが画面から横方向に飛び出てしまって困る。

ページネーションはFlexboxだが、デフォルトでは折返ししないことが原因(flex-wrapの値が設定されていない = デフォルトのnowrapとなっている)。

Laravelのページネーションをレスポンシブ対応する方法

逆に言えば、折り返すように設定してやれば画面からはみ出ることはなくなる。

コード

flex-wrapをwrapに設定すればOK。

resources/views/vendor/bootstrap-4.blade.php

もしくは、画面幅が一定サイズを下回ったら「前へ」と「次へ」ボタン以外は消してしまうといった方法もある。

他にはCSSでサイズを調整するとかもアリかも。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です