Full height

[tihomir-kit]

Hi,

could you please help me with this one? This is what my html looks like:

<div ng-controller="NamespacesCtrl" id="sidebar-navigation">
    <div id="scrollbar" class="scrollbar">
        <div class="handle"></div>
    </div>

    <div id="nonitembased" class="frame">
        <ul class="slidee">
            <li><label>Namespaces</label></li>
            <li ng-repeat="(namespace, methods) in namespaces"><a href="javascript:void(0)">{{namespace}}</a></li>
        </ul>
    </div>
</div>

What I would like to achieve in the end is something like the sidebar navigation on devdocs,

I'm just not sure how to setup the css for this, no matter what I tried, nothing worked (except setting fixed height which I would like to avoid).. (I suck with css, and am not even sure what to google to solve this). Thank you :)

[darsain]

That scrollbar is 100% pure CSS. You don't need Sly for this. Here is copy & paste from their's style file:

._sidebar::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px
}

._sidebar::-webkit-scrollbar-button {
    display: none
}

._sidebar::-webkit-scrollbar-track {
    background: #fff
}

._sidebar::-webkit-scrollbar-thumb {
    min-height: 2rem;
    background: #d2d2d2;
    background-clip: padding-box;
    border: 3px solid #fff;
    border-radius: 5px
}

._sidebar::-webkit-scrollbar-thumb:active {
    background-color: #aaa;
    border-width: 2px
}

But of course this works only for Chrome. Firefox and IE will display their native scrollbars.

[tihomir-kit]

Thank you for the answer, but I want to use sly because I want other features that it provides as well.. And I'm just not sure how to make it work with 100% height. If possible at all? Devdocs example was just a sample of how I would like it to look.

I looked at full page sample as well and I have 100% on body and the container div but for some reason everything renders fully and initializing sly does not do anything..

[darsain]

I don't understand what you mean by 100% height. What is 100% height? The frame element? Than all you need to do is fire .reload() on window resize so Sly can adjust. Otherwise everything is the same.

Also, if you don't show me an isolated example of what you are doing so I can look at what you are doing wrong, I can't really help you.

[tihomir-kit]

Here is the whole thing extracted, I think it's quite similar to your full page example but it just doesn't work, and it's most probably a noobish thing.

By 100% height I mean body and the container or the frame element. Anything except fixed px height. I also played with position fixed/absolute and overflow css properties but can't seem to figure it out.

In this case I believe .reload() isn't necessary because JS is inside document ready and even if you run it afterwards through devtools, nothing changes.

Thank you very much for your time. :)

[darsain]

There is nothing wrong with how you use Sly there. You are doing CSS wrong. This is what you need:

body {
    height: 100%;
}

.full-width {
   width: 100%;
   height: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}

#main-container {
    height: 100%;
}

#navigation-container {
    height: 100%;
}

#main-content {
    height: 100%;
}

#navigation-content {
    height: 100%;
}

And set up scrollBy option so the content can be scrolled by mousewheel. But I see that scrolling is funky. I guess some regression in recent commits. I'm gonna make an issue for it.

---

Also, this is not a place to learn CSS. If there is overblown amount of something on the internet, it's resources on how to learn web development. Don't ask open source maintainers to personally teach you that. A lot of us have huge amounts of work to get to, but are too polite to tell people to fuck off.

[tihomir-kit]

I understand it isn't and I usually don't do this but from what I've been able to google out, I thought this should work and wasn't sure what to google anymore. Thanks again and sorry for the trouble. And thanks for the plugin, it's great. :)