search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.96k stars 3.52k forks source link

QTable in 1.4 shows scrollbars now when it's not necessary #5511

Closed rfox12 closed 4 years ago

rfox12 commented 5 years ago

Big user of QTable. (Awesome improvements btw!. However I've noticed with the most recent update that q-tables which use pagination (e.g. 25 rows per page) sometimes now have a scrollbar that scrolls up and down 2 pixels inside the table. I will try to product a codepen example soon as I can.

Also as a side note there is this really weird mouse-over effect on every-other-row where the scrollbar appears and disappears. It's like something is sizing?

pdanpdan commented 5 years ago

Do you have row selection checkboxes active?

pdanpdan commented 5 years ago

Also what platform, os, browser?

rfox12 commented 5 years ago

@pdanpdan Thank you for your patience. This is the codepen https://codepen.io/robert123789/pen/XWWYZGq

The steps to reproduce were very simple... I took the "Expanded row and custom selector" codepen and simply added three attributes on the <q-table> tag: dense, flat, and bordered. I could not replicate the "wiggle" effect yet where the scrollbar appears and disappears.

I'm using the latest Chrome on Windows 10. I'm on the desktop.

pdanpdan commented 5 years ago

I cannot replicate it :( Can you please try to debug it when you can reproduce it and check to see what element is causing the overflow?

metalsadman commented 5 years ago

using the doc's example https://quasar.dev/vue-components/table#Example--Expanded-row-and-custom-selector in the codepen, it does show a scroll bar in chrome (Version 78.0.3904.97), not in firefox (69.0). The docs version doesn't show scrollbars tho.

pdanpdan commented 5 years ago

Can you please check the scaling set in windows (scale and layout). From what I remember it sometimes does funny things.

rfox12 commented 5 years ago

@pdanpdan You're a genius--that's exactly the case for me. I have big (high DPI) desktop monitors and I'm running at 125% so I can see the text. Once I scale back to 100% the scrollbars are gone. Is there anything we can do to "fix" this?

Worth mentioning... I've always had my development environment like this... and prior versions of QTable didn't have this issue.

pdanpdan commented 5 years ago

I'll have to do some research. I think there was a similar issue opened. I'll keep you posted when I find something.

rfox12 commented 5 years ago

Thanks I'm also taking a more critical look. Seeing lots of weird things when scaling now... for instance... now TD cells on the same row (TR) can be different heights (e.g. off by 0.185 at 110% scale). And I have absolutely no idea why. All of the CSS inspection has the same source attributes. Quick update... apparently the slight different heights on TD cells is something that goes back several versions... and is just perhaps more pronounced now? The scrollbar issue is gone (at all scales) when I regress to Quasar 1.2.7.

pdanpdan commented 5 years ago

I think it's something related to HiDPI support on stable Windows version of Chrome. Because I cannot reproduce it on Win 10 with HiDPI set to 100%, 125%, 150% - but I'm using Chrome 80.0.3962.2 (Official Build) dev (64-bit). Let's hope it'll get fixed in the next stable release of Chrome.

pdanpdan commented 4 years ago

I cannot reproduce in current generation browsers and without HiDPI changes. With HiDPI changes it depends on OS/browser, it's nothing we can fix, sorry.