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

ScrollPanel Bars visible with Browser Zoom #2137

Closed
Rakasch opened this issue Feb 10, 2022 · 5 comments
Closed

ScrollPanel Bars visible with Browser Zoom #2137

Rakasch opened this issue Feb 10, 2022 · 5 comments
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@Rakasch
Copy link
Contributor

Rakasch commented Feb 10, 2022

I'm submitting a ...

[ X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primevue/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=110

Current behavior
Scrollpanel causes white borders if you have Browser Zoom at 80% or smaller.
The original scrollbars are visible. It is particularly annoying in a Darktheme.
image

Suggested fix
Hide the default scrollbars from the scrollpanel component via css.
// Chrome
.p-scrollpanel-content::-webkit-scrollbar {
display: none;
}
.p-scrollpanel-content{
-ms-overflow-style: none; // IE and Edge
scrollbar-width: none; // Firefox
}

  • Vue version: 3.X

  • PrimeVue version: 3.4.X

  • Browser: Chrome XX

@tugcekucukoglu tugcekucukoglu added the Status: Pending Review Issue or pull request is being reviewed by Core Team label Feb 11, 2022
@tugcekucukoglu
Copy link
Member

Unfortunately, I cannot replicate the issue. For example this codesandbox in the first example scrollbars cannot seems but the second and the last example scrollbar are visible because of the this line https://codesandbox.io/s/lr3k1y?file=/src/ScrollPanelDemo.vue:4879-4938

Do you have a codesandbox link for us to replicate?

@tugcekucukoglu tugcekucukoglu added Resolution: Cannot Replicate Issue could not be replicated by Core Team and removed Status: Pending Review Issue or pull request is being reviewed by Core Team labels Mar 21, 2022
@Rakasch
Copy link
Contributor Author

Rakasch commented Mar 21, 2022

I have this issue in your codesandbox, too:

Browser Zoom 90% (Chrome)
image

Bowser Zoom 50% (Chrome)
image

Bowser Zoom 50% (Firefox)
image

@tugcekucukoglu
Copy link
Member

Still can not replicate the issue. If problem still persists, please send us a codesandbox link or a repo, so we can replicate this issue.

@Rakasch
Copy link
Contributor Author

Rakasch commented Oct 21, 2022

Did you change the Browser Zoom of your browser as stated?

  1. go to https://www.primefaces.org/primevue/scrollpanel
  2. set the Browser ZOOM to some small value
    image
    you can usually do this with ctrl + mousewheel
  3. Result is this
    image

@tugcekucukoglu
Copy link
Member

Thanks for the explanation. Reconsider it again.

@tugcekucukoglu tugcekucukoglu added Status: Pending Review Issue or pull request is being reviewed by Core Team Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Resolution: Cannot Replicate Issue could not be replicated by Core Team Status: Pending Review Issue or pull request is being reviewed by Core Team labels Oct 24, 2022
@tugcekucukoglu tugcekucukoglu added this to the 3.18.1 milestone Oct 27, 2022
@tugcekucukoglu tugcekucukoglu self-assigned this Oct 27, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

2 participants