Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix OncoKBTable header/body misalignment when there is scrollbar #3628

Open
calvinlu3 opened this issue Dec 12, 2023 · 0 comments
Open

Fix OncoKBTable header/body misalignment when there is scrollbar #3628

calvinlu3 opened this issue Dec 12, 2023 · 0 comments

Comments

@calvinlu3
Copy link
Contributor

Issue:
When the table body has a scrollbar, the header is not aligned with the body.

We try to fix this by adding the fixedHeight prop to OncoKBTable which applies some margin to the right (https://github.com/oncokb/oncokb-public/blob/master/src/main/webapp/app/index.scss#L284-L291). This is a quick fix, but introduces some other issues:

  1. There is still some misalignment with 15px depending on the OS (mac vs windows) and by browser (different browsers have different scrollbar styles).
  2. When we filter down the table to 1 entry (for example), the scrollbar disappears, but we still have the 15px margin right. As a result, the header/body is still misaligned.

Potential Solution(s):

  1. We can add overflow-y: scroll to the body so that it always shows the scrollbar. (This will resolve the second issue). We can then try (https://davidwalsh.name/detect-scrollbar-width) to calculate the exact scrollbar width that we can use as margin. (This will resolve first issue)
  2. Another option is to add a scrollbar to the header, but make the scrollbar background transparent to hide it.

Screenshot:
Misalignment when table body has scrollbar
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant