search

app-generator / django-soft-ui-design-pro2

Soft UI Design PRO - Django Template | AppSeed
https://appseed.us/product/soft-ui-design-pro/django/
Other
1 stars 0 forks source link

Navbar shifts left/right when browsing between pages with/without scrollbar #1

Closed JacobJeppesen closed 2 years ago

JacobJeppesen commented 2 years ago

Is there a way to ignore the scrollbar when determining the navbar width and position? For example, when going to https://django-soft-ui-design-pro.appseed-srv1.com/login/?next=/ , there is no scrollbar, and when logging in to the index page where there is a scrollbar, the navbar is shifted to the left. It would be great if it was possible to keep the navbar in the same place when browsing between pages with/without scroolbars.

app-generator commented 2 years ago

Hello @JacobJeppesen,

Please provide an image that suggests the problem. Also, other things might help:

Ty!

JacobJeppesen commented 2 years ago

I don't know how easy it is to see in the images below, but the scrollbar shifts the navbar (and page content) left. This makes it look a bit disturbing when browsing pages with/wihout scrollbars, and the navbar shifts left/right. One solution might be to always force a scrollbar (https://github.com/twbs/bootstrap/issues/1648). Another solution might be to use a something similar to https://stackoverflow.com/questions/65177179/how-to-move-scrollbar-behind-fixed-navbar-header (although this might make the navbar and page content unaligned).

The issue is on PC, using any browser. Mobile views normally do not show scrollbars, so there is no issue.

login_page logged_in

JacobJeppesen commented 2 years ago

I think the best solution might be to always force a scrollbar on PC. Other solutions might make the navbar and content look off-center on the page.

So, in short, is there a way to always force a scrollbar on PC? :)

app-generator commented 2 years ago

The scrollbar becomes visible once the page size is bigger than the viewport. To pass this default behavior, this solution might help:

https://www.w3schools.com/howto/howto_css_force_scrollbars.asp

Let us know your progress.

JacobJeppesen commented 2 years ago

Got it working by adding overflow-y: scroll to body in the .../custom/_styles.scss file, and re-compiling the CSS. .../custom/_styles.scss now contains:

body {
  overflow-y: scroll;
}