Making the Tree Tools sticky in SilverStripe

Posted March 25th, 2011 in Offsite Articles and SilverStripe

I use SilverStripe for a number of my websites and find the tree tools in the the site tree area annoying how it scrolls out of view when scrolling through a large set of pages. This post shows some screenshots of the issue and solution, and links through to the solution at SSbits.

SilverStripe version used

The version of SilverStripe used when I was testing and suggesting changes to the post at SSbits is 2.4.5. I have tested the solution myself in Chrome 10 on Mac and Firefox 3.6 on Mac and Windows.

The issue

The first screenshot below shows the problem. The image on the left is of the site tree with the tree tools at the top when no scrolling has been done. The image on the right shows what it looks like once you've scrolled down a bit: the tree tools scroll out of view.

This means you no longer have access to the create new page function without scrolling back up again. To make a new subpage you have to scroll down and find the page, then scroll back up to create the sub page. If you want to want to access the parent page again back down you scroll.

The solution

I had attempted to solve this issue myself a few weeks ago but gave up; then Aram Balakjian over at SSbits came up with an almost perfect solution. I played around with it a bit and suggested some improvements which solved a couple of minor annoyances and he updated the article.

The end result is shown in the screenshots below. Again on the left is before scrolling and on the right having scrolled down a bit.

You can see the scrollbar is now below the tree tools area instead of the tree tools being inside the scrolling area, and they are now "sticky" so that when you scroll down they remain above the scrolling area.

The solution can be found in the post "Making the Tree Tools sticky for easier editing on large sites" over at ssbits.com.