[Bug] Minor display issues

[giannoug]

Version

1.0

Reproduction link

https://demos.creative-tim.com/black-dashboard-pro-react/

Operating System

Windows 10

Device

Desktop

Browser & Version

Version 75.0.3770.142 (Official Build) (64-bit)

Steps to reproduce

I'm describing three different bugs below:

1. In a page with not enough content, no matter the content, the page will always have a scroll bar. This is bad experience to the user.

Example link: https://demos.creative-tim.com/black-dashboard-pro-react/#/admin/user-profile

2. When scrolling, the icon above the sidebar doesn't stay above it and scrolls with the page. It doesn't happen with Black Dashboard PRO HTML version. Check the icon above the sidebar:

WORKING -> https://demos.creative-tim.com/marketplace/black-dashboard-pro/examples/dashboard.html
NOT WORKING -> https://demos.creative-tim.com/black-dashboard-pro-react/#/admin/dashboard

3. A small sidebar appears on the bottom of the sidebar when the it is expanded.

Example (open the sidebar and look at the bottom of it): https://demos.creative-tim.com/black-dashboard-pro-react/#/admin/dashboard

What is expected?

1. No scrolling is shown when content fits the page
2. The icon should stay on top of the menu bar
3. No scrolling bar is shown

What is actually happening?

1. Scrolling occurs
2. The icon scrolls with the content
3. You can see a scrollbar that vanishes when you click it.

---

Solution

Additional comments

[einazare]

Hello there, @giannoug ,

Thank you for your interest in working with our products.

In a page with not enough content, no matter the content, the page will always have a scroll bar. This is bad experience to the user.

This is actually browser default behavior. You need to have a scroll effect, for users that modify the browser height. If we were to add for example:

overflow: hidden;

And one user would make the browser windows smaller, it would not have a scroll bar. Take a look at the following images:


Hope this clarifies a bit your concern.

When scrolling, the icon above the sidebar doesn't stay above it and scrolls with the page. It doesn't happen with Black Dashboard PRO HTML version. Check the icon above the sidebar:

I can see that the icon is staying above the Sidebar. Maybe I didn't understand your question correctly. Could you please provide some additional comments on this? Maybe some images?

A small sidebar appears on the bottom of the sidebar when the it is expanded.

Go inside this file: src/components/Sidebar/Sidebar.jsx and change

ps = new PerfectScrollbar(this.refs.sidebar);

to

ps = new PerfectScrollbar(this.refs.sidebar, {
        suppressScrollX: true,
        suppressScrollY: false
      });

Will wait for your response.

Best,
Manu

[giannoug]

This is actually browser default behavior. You need to have a scroll effect, for users that modify the browser height.

You don't need to show a scrollbar and allow the page to scroll when the content fits the page.
For example look at this page: https://demos.creative-tim.com/black-dashboard-pro-react/#/auth/login

I can see that the icon is staying above the Sidebar. Maybe I didn't understand your question correctly. Could you please provide some additional comments on this? Maybe some images?

When you scroll, the icon leaves with the content on the React version (left). On the HTML version (right) it stays on top of the sidebar.

Go inside this file: src/components/Sidebar/Sidebar.jsx and change

Thanks that worked!

[einazare]

Hello again, @giannoug ,

You don't need to show a scrollbar and allow the page to scroll when the content fits the page.
For example look at this page: https://demos.creative-tim.com/black-dashboard-pro-react/#/auth/login

We are sorry about this, but we can't modify this.

When you scroll, the icon leaves with the content on the React version (left). On the HTML version (right) it stays on top of the sidebar.

Maybe this is a bug only on windows devices. Since I am not at the office until next Monday I will not be able to test this. I will come back then with a fix.

Best,
Manu

[giannoug]

We are sorry about this, but we can't modify this.

I was able to fix this by changing
.footer { padding: 24px 30px; }
to
.footer { padding: 24px 30px 0 30px; }

Since I am not at the office until next Monday I will not be able to test this. I will come back then with a fix.

Thanks!

[einazare]

Hello again, @giannoug ,

Thank you for your patience.
I've found out why the second issue is happening.
It is because we are using perfect-scrollbar to make a nice scrollbar on Windows devices, something like the scrollbar from the MacOS. This means that the event listener for the scroll on the window selector will not get fired - the scroll is not happening on the window element on Windows devices.
Please add the following line of code inside src/layouts/Admin/Admin.jsx, after if (navigator.platform.indexOf("Win") > -1) {:

this.refs.mainPanel.addEventListener("ps-scroll-y", this.showNavbarButton);

Hope this helps.

Please leave the issue opened.

Best,
Manu