3

I'm having an issue trying to hide the ribbon when the modal displays as a pop up.

Here is what I have tried so far. Within the JavaScript I call this

function MyJSMethodWithCallBack() {
    var dialogOptions = {
        url: 'newpage.aspx',
        dialogReturnValueCallback: function (dialogResult) {
            //Where you can do additional JS function base on the dialogResult.
            SP.UI.ModalDialog.RefreshPage(dialogResult);
        }
    };
    OpenPopUpPageWithDialogOptions(dialogOptions);
    HideRibbon();
}

function HideRibbon() {
    $('.ms-dlgFrame').load(function () {
        console.log("This enters the Hide Button");
        $('#s4-ribbonrow').hide();
    });
}

The comment within hide-button does get displayed, but the ribbon is still displaying. This is a webpart page in sharepoint 2013. I'm guessing the page is loading before the hide can occur? What should I do differently?

  • 2
    Try appending ?isDlg=1 to the url – Nadeem Yousuf Feb 2 '15 at 6:35
  • You should place the code that hide the ribbon in the page you display (newpage.aspx), and invoke it for example from $(document).ready(), or at least, wait in your current implementation till the page in the modal dialog is loaded an the ribbon is rendered (for example via a DOM event or setTimout method). If you use the same newpage.aspx from other context as well, and you need the ribbon there, you can append a query string parameter to the URL (like newpage.aspx?hideribbon=1) and hide the ribbon depending on that parameter. – pholpar Feb 2 '15 at 6:50
  • to hide ribbon from popup, you just need to add "s4-notdlg" class to ribbon like this <div id="s4-ribbonrow" class="s4-notdlg"> – Rajesh Joshi Feb 2 '15 at 7:23
5

Add following css in your newpage.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>

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.