search

themesberg / volt-bootstrap-5-dashboard

Free and open source Bootstrap 5 Admin Dashboard Template with vanilla Javascript
https://themesberg.com/docs/volt-bootstrap-5-dashboard/getting-started/quick-start/
MIT License
2.61k stars 302 forks source link

Fix for content shift (issue #59) #62

Open SevilleCode opened 2 years ago

SevilleCode commented 2 years ago

I took a look at the problem described in issue #59 and think I found the issue. It appears to be related to the white-space: nowrap value for the .nav selector. I have disabled that value for now, and so far the problem seems to be resolved. I disabled it instead of outright removing it in case it needs to be re-enabled in the future.

zoltanszogyenyi commented 2 years ago

Hey @SevilleCode,

Thanks for the PR.

Is this tested with the pro version? The bug, as far as I'm concerned, only happens for the pro version where the sidebar can be expanded.

Thanks, Zoltan

@PerryCodes can you check this fix out in your environment, please?

PerryCodes commented 2 years ago

Short answer: no. this doesn’t seem to fix the problem.

But this was also the first time that I’ve used Gulp and it raised a couple issues…

Why isn’t there a JS folder under ‘html&css’ in the original PRO download, but one gets created when I run ‘gulp build:dev’?

After running ‘gulp build:dev’ on the original download, I get yet another issue… each time I click a link in the sidenav, I’m getting a quick flash of the system scrollbar. That didn’t happen with the original files in ‘html&css’.

After commenting out the one css selector in _sidenav.scss and rebuilding with Gulp, I get the same results… original bug of content shifting is still there + the odd system scrollbar issue.

Jason

zoltanszogyenyi commented 2 years ago

@cordosvictor can you please check this out? Thanks!

PerryCodes commented 2 years ago

I figured out one of the issues...

In the 'html&css' folder included with the current 1.4.1 PRO download, all the JavaScript is located in: './assets/js/volt.js' whereas doing a build with Gulp results in the folder './js/' with JavaScript being split between the following three files:

I've also determined that this "content shifting" only happens in Chromium-based browsers. Firefox doesn't have any content shifting, however Firefox does flash a system scrollbar in the sidenav every time a selection is made... That behavior doesn't happen in Chromium browsers with the contents of 'html&css' downloaded with 1.4.1. But as I mention above, rebuilding with Gulp gives me a copy that does flash the system scrollbar in the sidenav regardless of browser.

SevilleCode commented 2 years ago

@zoltanszogyenyi I did not test it in the pro version. Since I was encountering the problem in the free version, I tackled it there. Disabling the white-space: nowrap value fixed the issue for me, so I thought it might fix it for everyone else. But like @PerryCodes said, the problem does seem to only be present in Chromium browsers.