giterlizzi / dokuwiki-template-bootstrap3

Bootstrap-based template for DokuWiki
https://dokuwiki.org/template:bootstrap3
GNU General Public License v2.0
220 stars 77 forks source link

how to make the sidebar fixed #531

Open hemind opened 3 years ago

hemind commented 3 years ago

First I would like to thank you for this great templet!

What I want to do is to let the sidebar fixed so the sidebar will not scroll with the page when I scroll up and scroll down the page.

I have tried the method in this thread https://forum.dokuwiki.org/d/10227-solved-sidebar-scrolling/4 by addinng a file conf/userstyle.css with content below, but the sidebar still scroll with the page.

dokuwiki__aside {

position: fixed; top: 150px; bottom: 0; overflow: auto; }

So I was wondering if you have some solution? Thank you in advance!

Giraffaman commented 3 years ago

It would be nice to have the option to affix the sidebar in the future.

I came across the same thread you linked above and managed to get it working well enough for me by adding the following to /conf/userall.css:

@media (min-width: 960px) {
  #dokuwiki__aside {
    position: fixed;
    top: 200px;
    left: 0px;
  }
  #dokuwiki__content {
    position: relative;
    top: 0;
    left: 15%;
    width: 85%
  }     
}

The media clause is necessary to allow the sidebar to be collapsed on smaller screens. When that happens, it shouldn't be position:fixed anymore because that would put it in the background behind the content. This way, it collapses and is accessable via the usual bootstrap-menu above the content.

I also made the content area position:relative and moved it to the right so it doesn't cover the sidebar.

EDIT: also reduced width of #dokuwiki__content to prevent stuff being pushed off-screen on some pages (e.g. Configuration Manager)

Juergen-aus-Zuendorf commented 3 years ago

Good tip! But is it also possible to give a scrollbar to the sidebar if it is longer as the content area?