【不具合修正】Laravel-admin の Grid 表示で列固定 (fixed)すると表示がズレる

どんな不具合か

【概要】

Laravel-admin の Grid 表示で、「表示固定された列」と「通常の列」とで表示が上下にズレてしまう（上画像のようになる）。これはレコード数（行数）が少なければ気にならないレベルだが、多くなると顕著になる。

↓Laravel-admin のデモページを見てもらえれば一目瞭然。

【Laravel-admin バージョンごとの発生状況】

バージョン	不具合
1.7.3	あり
1.8.11	あり
その他	不明

【ブラウザごとの発生状況】

ブラウザ	バージョン	不具合
Chrome	92.0.4515.131	あり
FireFox	90.0.2	あり
Safari	14.1.2	なし

私が普段使っているブラウザでは、Chrome と Firefox でこの不具合が発生する。

修正概要

• Laravel-admin バージョン：1.8.11
• 修正箇所
  • ソース：/vendor/encore/laravel-admin/resource/views/grid/fixed-table.blade.php
  • 行番号：182（scriptタグ内）
• 原因：レコードオブジェクトの高さを取得している jQuery の outerHeight()メソッドは、ブラウザによっては整数に丸めてしまうらしい。
• 対策方法：getBoundingClientRect().heightを使うと、オブジェクトの高さを小数のまま取得できる。

修正コード

fixed-table.blade.php（修正前）

$('.table-main tbody tr').each(function(i, obj) {
    var height = $(obj).outerHeight();  // 【このコードを修正】

    $('.table-fixed-left tbody tr').eq(i).outerHeight(height);
    $('.table-fixed-right tbody tr').eq(i).outerHeight(height);
});

fixed-table.blade.php（修正後）

$('.table-main tbody tr').each(function(i, obj) {
    var height = $(obj).get(0).getBoundingClientRect().height;  // 【このコードを修正】

    $('.table-fixed-left tbody tr').eq(i).outerHeight(height);
    $('.table-fixed-right tbody tr').eq(i).outerHeight(height);
});

getBoundingClientRect() は DOMオブジェクトのメソッド。
$(obj)はjQueryオブジェクトなので、そこから直接は使えない。
なので、間に「get(0)」を付けてDOMオブジェクトとして扱う必要がある。