dokuwiki-template-bootstrap3 icon indicating copy to clipboard operation
dokuwiki-template-bootstrap3 copied to clipboard

how to make the sidebar fixed

Open hemind opened this issue 3 years ago • 2 comments

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!

hemind avatar Jan 25 '21 19:01 hemind

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)

Giraffaman avatar Feb 14 '21 23:02 Giraffaman

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

Juergen-aus-Zuendorf avatar Oct 13 '21 14:10 Juergen-aus-Zuendorf