0

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:

<script>
.s4-ribbonrow {
    display: none;
}
</script>

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

s4-ribbonrow

| improve this question | |
  • 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. – Christoffer May 10 '16 at 13:58
  • 1
    s4-ribbonrow is an ID but you're using it as a class. See the answer below. – Aveenav May 10 '16 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 – Danny '365CSI' Engelman May 10 '16 at 14:20
5

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

<script type="text/javascript">
var suitebar = $("#suiteBar");
if(suitebar.length<1)
$("#s4-ribbonrow").css('display','none');
</script>

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;}
    </style>
| improve this answer | |
  • It worked! Thank you very much for solving my issue – SteffPoint May 11 '16 at 6:43
  • If so than please mark & upvote it as correct so other can get benefit of it.... Thanks – Hardik May 11 '16 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 '16 at 6:51
2

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

| improve this answer | |
2

Try the following CSS:

.ms-dialog div#s4-ribbonrow {
  display: none !important;
}
| improve this answer | |
-2

Try this:

.ms-cui-tabContainer 
{

    display: none;
}


.ms-cui-tt {

    display:none;    
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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