Paper Dashboar Pro - Bug Report: Footer & Sidebar Whitespace

[tyrollins]

First of all, great product, however I have noticed some small bugs.

The main one being - when the sidebar on Paper Dashboard Pro is minified, the footer does not stay stuck to the bottom if page content does not fill the screen, it raises to the bottom of the content leaving a white space below it. There is also a small section of white space under the minified sidebar. Here is a link to a photo describing the issue - https://www.dropbox.com/s/b871km7xbwgblst/pdp.png?dl=0

I have tested in the latest version of Chrome, Safari, and Firefox Developer Edition

I did not see a paper dashboard pro repo, so posted here.

[alexandru-paduraru]

@tyrollins thank you for pointing out and sorry for the late response. Can you please give us more details about the OS that you used? Here is the example of how the page is looking on our side:

Keep in touch, Alex

[tyrollins]

Interesting. I am on the latest macOS Sierra - tested on both MacBook Air & iMac. I have tested on the latest versions of - Safari, FireFox, and Google Chrome - the issue persists across all on both machines.

I'll look into it more tonight & try to get to the bottom of it. It's probably a small bug in the sass like min-height not being explicitly set or something.

Could you possibly test on the starter-template page, when there is zero content maybe it will appear?

Will update when I find a cause / solution.

Thanks so much.

[tyrollins]

It seems that the issue was line 258 in _sidebar-and-main-panel.scss which has -

> .content {
    min-height: calc(100% - 123px);
    padding: 30px 15px 0;
  }

Setting min-height: calc(100vh - 123px) appears to solve the problem. Solution for me -

> .content {
    min-height: calc(100vh - 123px);
    padding: 30px 15px 0;
  }

[alexandru-paduraru]

@tyrollins yes, you're right the issue is present in starter template. For the content, your solution is good and for the sidebar please go to _sdeibar-and-main-panel.scss on line 10 and replace this: height: calc(100vh - 75px); to this height: calc(100vh - 95px); and everything will work fine.

Please let us know if that was working. We will add this in our update list and add to the official release on the next update.

Best, Alex

[tyrollins]

Hey Alex.

All seems to be working correctly at this point. Thanks for your help. One additional question regarding sidebar-mini.

When the sidebar is minified, and the pages content goes past the viewport / page fold, the minified sidebar scrolls with the whole page. Notice that when the sidebar is not minified, only the main-panel / content scrolls and the sidebar remains fixed on the side. However, once minified, the mini-sidebar does not remain fixed in place, and scrolls up and down with the rest of the page / content.

Is this a bug or is it supposed to work like this? Is there a quick fix you can think of to keep the mini-sidebar from scrolling with the rest of the page, and remain fixed in place like it's un-minified brother?

Thanks so much, I'm really enjoying working with this product.

Best. Tyler

[tyrollins]

I have found a solution to my above issue -

adding position: fixed; to .sidebar which is near line 333 and nested in class .sidebar-miniin the _sidebar-and-main-panel.scss file solves the problem.

The final result is -

    .sidebar {
      display: block;
      position: fixed;
      width: 80px;
      z-index: 3;

I am closing the issue as solved, since we have worked out a reasonable solution, feel free to re-open if you would like to leave it open for others to comment on. Even as a closed issue, others can still reference our comments & learn from our solutions.

All the best. Tyler

[alexandru-paduraru]

@tyrollins the sidebar mini was made to scroll with the page because we taught that if you have too many elements on it with dropdowns it will look very weird to have a scroll for the sidebar and a scroll inside the dropdowns which are long and are going out of the screen. That's why we made it that way. I think the best way is to create some classes and let the user choose which one he wants. Thank you for the CSS example, we will check it and if everything is working fine, then we will add in the official update.

All the best, Alex