quasar
quasar copied to clipboard
quasarframework
QTable scrollTo(0) with sticky header should not hide first item behind the header
What happened?
GIVEN I have a paginated table with a sticky header and the table is scrolled down, WHEN I try to using table.scrollTo(0) to scroll to the top, THEN the first row is hidden behind the sticky header.
What did you expect to happen?
WHEN scrolling to the top of a table (index 0) then I expect that first row to be visible, not hidden behind the sticky header.
Reproduction URL
https://codepen.io/jmcopeland/pen/rNvwOGq
How to reproduce?
Steps:
- Go to the reproduction link
- Scroll the table down towards the bottom
- Hit "Scroll to top" button
Expected:
- Scroll the table to the top so that first item is visible
Actual:
- Scroll the table to the top, but the first item is hidden behind the sticky header
Flavour
Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)
Areas
Components (quasar)
Platforms/Browsers
Chrome, Safari
Quasar info output
Operating System - Darwin(21.6.0) - darwin/arm64
NodeJs - 16.3.0
Global packages
NPM - 8.5.0
yarn - 1.22.11
@quasar/cli - 1.3.2
@quasar/icongenie - Not installed
cordova - Not installed
Important local packages
quasar - 2.8.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-webpack - 3.6.0 -- Quasar Framework App CLI with Webpack
@quasar/extras - 1.15.3 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - 1.1.0 -- Official ESLint plugin for Quasar
vue - 3.2.37 -- The progressive JavaScript framework for building modern web UI.
vue-router - 4.1.5
pinia - Not installed
vuex - 4.0.2 -- state management for Vue.js
electron - Not installed
electron-packager - Not installed
electron-builder - Not installed
@babel/core - 7.17.9 -- Babel compiler core.
webpack - 5.72.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
webpack-dev-server - 4.9.3 -- Serves a webpack app. Updates the browser on changes.
workbox-webpack-plugin - Not installed
register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed
Quasar App Extensions
@quasar/quasar-app-extension-qcalendar - 4.0.0-beta.15 -- A Quasar App Extension for @quasar/quasar-ui-qcalendar
Relevant log output
No response
Additional context
No response
It's an interesting case, but unfortunately it's impossible to solve it. I'll leave the issue open, but do not expect any solution.
I'm trying to make this work to fix an annoying UI/UX issue with the table that has shown up in our user testing, which is that when you move between pages the scroll holds its place, and users get confused. So I'm trying to auto-scroll to the top upon page change. Maybe there is another way to deal with this?
The header does not occupy space in the scrolling parent, except when the scroll top is 0. So from the pov of the virtual scroll the first row is scrolled in the right position. I'll take a look again this week, maybe I missed something.
:) I was tired yesterday - it cannot be solved for normal QTable, but it's already solved for QTable using virtual-scroll
https://codepen.io/pdanpdan/pen/rNvzWbz?editors=1000
Awesome! Thank you so much. Any gotchas to be aware of when using the virtual-scroll?
Not that I can think of right now. But I think I'll be able to fix it for non-virtual also if you provide the height of the sticky on top
