SharePoint: Hiding Ribbon and More with IsDlg

SharePoint has this neat little feature on every page that allows you to hide the header and nav on the page by simply appending isdlg=1 to the end (careful, it’s case sensitive). It comes in handy when you’re using a page viewer web part, you can show another page on your page and hide the other stuff that you already have on the page. Huh?

It does this:

A normal, happy, SharePoint page

Adding isdlg=1 to the URL makes it look like this

As you can see we lost the header and quick launch, which is great, but we still have a ribbon! GAH, let’s get rid of it!

This use case came out of a StackExchange question. The user only wanted to show the list of documents in a page viewer web part.

Easy enough! With a little jQuery, we can hide the ribbon, and other stuff on the page. You will need to put this code on the page that you want to hide components on, in my case I put this on my library page. You can embed it a few different ways, I prefer using a Content Editor Web part. Here’s the code to hide the ribbon bar:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">

_spBodyOnLoadFunctionNames.push("hideItAll");

function hideItAll(){
 if(window.location.search.toLowerCase().indexOf("isdlg=1") > 0){
 $("#s4-ribbonrow").hide(); //ribbon bar
 }
}
</script>

What the above does is check if the isdlg=1 flag is in the URL, and if it is, hide the ribbon bar.

So you get something like:

Ooooo…. what about that other bar, with the new, upload, sync? Let’s hide that too. Update your script like:

function hideItAll(){
 if(window.location.search.toLowerCase().indexOf("isdlg=1") > 0){
 $("#s4-ribbonrow").hide(); //ribbon bar

 //because the bar joins us late in the game, we need to throw CSS in to hide it
 $("head").append("<style>#Hero-WPQ2 { display:none }</style>");

 }
}

will look something like:

And let’s go crazy and hide that pesky view and search bar:

function hideItAll(){
 if(window.location.search.toLowerCase().indexOf("isdlg=1") > 0){
 $("#s4-ribbonrow").hide(); //ribbon bar

 //because the bar joins us late in the game, we need to throw CSS in to hide it
 $("head").append("<style>#Hero-WPQ2 { display:none }</style>");

 $("#CSRListViewControlDivWPQ2").hide(); //views and search bar
 }
}

Tada!

You can further explore and show/hide other page components as you want, find the element’s ID using your toolbar and have fun!

‘Til next time, happy SharePointing!