Make last file in list visible

[jeena]

For some reason the CSS didn't connect the side-nav to the bottom of the page and this lead to some wrong calculations of the browser which lead to the fact that the last file in the list of files was outside of the visible area.

Pinning it with bottom: 0; fixes this problem and now one can scroll down all the way to even see the last file in the file list.

[danielperna84]

Under which circumstances does this happen? Both on my PC and mobile the lists are complete. 🤔

[jeena]

Firefox on my laptops and desktop computers under Arch linux and Ubuntu. I checked now on my phone and this doesn't happen on firefox on the phone, interestingly I wasn't aware of the fact that you were supposed to see more than the list while scrolling, so my fix might destroy that feature, hmmm. But perhaps check on Firefox on Desktop?

[jeena]

Here is a screenshot of it:

I didn't zoom or anything. On the left bottom side there is another entry in the list which is called "www" and you can't see it.

[danielperna84]

I wasn't aware of the fact that you were supposed to see more than the list while scrolling

That's only on the mobile view. I'll check it out later today.

@jmart518 could you have a look at this as well since you're the graphics guy here? 🙂

[danielperna84]

I'va had a look at it and confirm the cosmetic flaw you're seeing. Unfortunately, your fix does not fix it for me. In Microsoft edge we have the same problem. And in Chrome it shows correctly, but only because the scrollbar appears to scroll outside of the viewport. So thechnically it's broken there probably too.

[danielperna84]

This fixes it for me:

        .side-nav {
            width: 337px !important;
            height: 100% !important;
        }

I've set the width to be bigger because of appearing scrollbars. I'd actually prefer slimming down whatever is responsible for the scrollbars, but I didn't find it at first sight. The downside of this solution is, that the original height: calc(100% + 60px) from Materialize trims off those 60px, which hides the content in FF, but makes it appear correctly in Chrome. But that seems better than having FF and Edge Users not seeing every file.

[danielperna84]

@jeena Did you get the chance to test my last proposed solution?

[danielperna84]

I now have pushed my solution to the dev-branch: https://github.com/danielperna84/hass-configurator/commit/2d930655b64fa8b1c7fe36bef40d7a0776f942dd

[jeena]

Sorry, never got the chance doubble checking it, was abroad for the last coupple of weeks. But glad to see it in the dev branch.