admin icon indicating copy to clipboard operation
admin copied to clipboard

Sticky table headers broken in Firefox

Open mologie opened this issue 6 years ago • 7 comments

Hello, I found that the QOR admin demo (and my app) suffer from cosmetic issues in any view that involves tables. I've tested this with Firefox 63 on Windows and macOS.

Steps to reproduce:

  1. Visit https://demo.getqor.com/admin/colors
  2. Ensure that the browser is smaller than the table, so that horizontal and vertical scrolling is enabled
  3. Scroll down. Bug: The sticky table header does not move when scrolling horizontally.
  4. Scroll back up. Bug: The original table header is not restored, instead the sticky header overlaps content.
screen shot 2018-11-20 at 23 04 01 screen shot 2018-11-20 at 23 04 05

mologie avatar Nov 20 '18 22:11 mologie

The problem appears to be with qor-fixer.js.

johnwilson avatar Jan 09 '19 21:01 johnwilson

@mologie Thank you for reporting this bug. I will check out this bug later.

jasonweng avatar Jan 10 '19 02:01 jasonweng

Confirmed here in Firefox Beta 66.0b11 (64-bit)

depado avatar Feb 26 '19 14:02 depado

@jasonweng Hello, do you have any updates how to fix this bug?

Prots avatar Nov 26 '19 16:11 Prots

@jasonweng Hi, We have found the solution for this bug. Some styles for header should be rewritten like:

.qor-table thead {
    position: static;
}

.qor-table-fixed-header > thead {
    position: fixed;
}

eugeneradionov avatar Dec 04 '19 09:12 eugeneradionov

Hi @Prots @eugeneradionov I will update the code later. Thanks for your help!

jasonweng avatar Dec 05 '19 01:12 jasonweng

@Prots @eugeneradionov @mologie I've updated the code: https://github.com/qor/admin/commit/9032e7fec172c66d73512cc0a59c8ecdf3af1fcc

jasonweng avatar Dec 05 '19 02:12 jasonweng