I'm challenging myself for a few hours now attempting to remove the s4-ribbonrow from a modal dialog window (as marked in my screenshot). I found several solutions on the web, which all require SharePoint Designer 2013 or any access to the SP master page. The problem is, that I am only responsible for some page which is far under the top level site and therefore I only could switch it off with Script Editor WebPart. I've tried to code it like:

.s4-ribbonrow {
    display: none;

But unfortunately it doesn’t change anything and I still can see the ribbon.


  • Try to change the first line to <script type="text/css">. And did you add the script editor to the actual list page or the actual form? The script editor should must be added to the actual form pages, newform.aspx, dispform.aspx and editform.aspx. May 10, 2016 at 13:58
  • 1
    s4-ribbonrow is an ID but you're using it as a class. See the answer below.
    – Aveenav
    May 10, 2016 at 14:10
  • Check first if your Modal dialog is displayed in an Iframe, if so any CSS you add in its parent will not be applied. You then have to get to the original-nonh-Iframed page and inject the CSS there with a CEWP May 10, 2016 at 14:20

4 Answers 4


If you are using Script Editor than please use below mentioned code.

<script type="text/javascript">
var suitebar = $("#suiteBar");

Add following CSS in your form pages like newform.aspx, dispform.aspx and editform.aspx, 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;}
  • It worked! Thank you very much for solving my issue
    – SteffPoint
    May 11, 2016 at 6:43
  • If so than please mark & upvote it as correct so other can get benefit of it.... Thanks
    – Hardik
    May 11, 2016 at 6:45
  • Done. I will have to gain some more points on this site that my upvotes will count. Have a nice day!
    – SteffPoint
    May 11, 2016 at 6:51

Try that CSS by marking as !important and also ensure that it must load after all your CSS files are loaded


Try the following CSS:

.ms-dialog div#s4-ribbonrow {
  display: none !important;

Try this:


    display: none;

.ms-cui-tt {


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.