Enhanced Scrolling in Sitecore Shell

November 3, 2016

Blog | Development | Enhanced Scrolling in Sitecore Shell
Enhanced Scrolling in Sitecore Shell

The Sitecore shell makes use of a number of scrollable regions. These scrollable regions use the default browser behavior for scrolling. While this is adequate for most interaction, it can be irritating on large screens when lists are anchored to the bottom of the screen.

An example of this is the default content tree behavior:

Attempting to view items near the bottom of the tree can be frustrating, such as when viewing nested items within other nested items at the bottom of the tree.

Improving this behavior is quite simple. All it takes is a minor change to the default Sitecore CSS.

Updating the CSS

In your installed Sitecore instance, open sitecore/shell/Themes/Standard/Default/Default.css in your text editor of choice.

Add the following CSS to the end of the file:

.scScrollbox:after {
  content: '';
  display: block;
  height: calc(100% - 20px);
}

.scContentTree:after {
  content: '';
  display: block;
  height: calc(100% - 26px);
}

The CSS causes some pseudo-elements to make the scrollable regions larger.

Save Default.css and refresh Sitecore

You should now be able to scroll past the end of certain scrollable regions.

Hopefully, this makes your Sitecore experience more pleasant. If you thought this was helpful and would like GeekHive to consult for other helpful Sitecore enhancements, don’t hesitate to¬†contact us.

Tim Leverett

Senior Developer
Tags
  • .NET
  • Best Practices
  • Content Editor
  • Content Management
  • Development
  • Sitecore
  • Tutorial

Recent Work

Check out what else we've been working on