SP2013: Hiding the ribbon in dialog view

Technical / November 13, 2013 / Jasper Siegmund / 1

Today I was working on a page which is displayed in a dialog view. Trimming SharePoint bits and pieces is easily done by adding IsDlg=1 to the querystring of the page. But… this does not hide the ribbon.

Ok, so how to hide the ribbon too then, when required? There’s a simple piece of CSS for that:

<style type="text/css">
#s4-ribbonrow, .ms-cui-topBar2, .s4-notdlg, .s4-pr s4-ribbonrowhidetitle, .s4-notdlg noindex, #ms-cui-ribbonTopBars, #s4-titlerow, #s4-pr s4-notdlg s4-titlerowhidetitle, #s4-leftpanel-content {display:none !important;}
.s4-ca{margin-left:0px !important; margin-right:0px !important;}
</style>

Suppose you add this snippet to a script editor web part which you added to your page. You save the page and… wait… how the heck  would you save the page without the ribbon? As soon as you save your code snippet, the CSS is inserted and the ribbon disappears. Now what?

Well… when you add IsDlg=1 to your page, this inserts CSS classes as well. Especially the “ms-dialog” class which is added to the HTML tag of your page. So make use of that and prefix your “hide the ribbon” CSS classes with it. This way, the ribbon will only be hidden in dialog view, and still usable in normal view.

<style type="text/css">
.ms-dialog #s4-ribbonrow, .ms-dialog .ms-cui-topBar2, .ms-dialog .s4-notdlg, .ms-dialog .s4-pr s4-ribbonrowhidetitle, .ms-dialog .s4-notdlg noindex, .ms-dialog #ms-cui-ribbonTopBars, .ms-dialog #s4-titlerow, .ms-dialog #s4-pr s4-notdlg s4-titlerowhidetitle, .ms-dialog #s4-leftpanel-content {display:none !important;}
.ms-dialog .s4-ca{margin-left:0px !important; margin-right:0px !important;}
</style>

#SharePoint

Jasper Siegmund