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
Horizontal scrollbar is visible on page refresh #8
Comments
So I tried adding a delay after the data has completed updating the variable for the stack in axios with the following:
and it actually worked. However, I feel I shouldn't have to do this in order to get the initial page load to reflow correctly. Perhaps the stack component should detect full page load and then call a reflow and/or do what I did with the delay? Seems as if it's doing the reflow too soon. I'll stick to this workaround for now until I get some input on this issue. Thanks. |
@bustarice thanks for the report. The Could you check if this happens in any browser, and if the appropriate methods get called on page load? You should be able to debug this pretty easily by adding |
So I did as you suggested with the following console.log:
console
home.vue
So it seems everything gets called correctly on the Stack component. By removing my delay code, I tried on IE/Edge/Firefox/Chrome and all exhibit the same behavior. |
I noticed when I refresh the page, I can see a horizontal scrollbar. However, if I resize the browser window it goes away and recalculates the grid items correctly again.
I can easily add an overflow-y: hidden to remove but it's not really a solution as the right side items will be cutoff and not fully shown.
I also tried adding:
ref="stacker"
and then a button to call a method:
which does work but adding it to mounted to do it automatically doesn't seem to do anything.
Is there any workaround or fix to remedy this situation?
The text was updated successfully, but these errors were encountered: