【버그 수정】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 오브젝트로서 취급할 필요가 있다.