Hide the ribbon on a Nintex form

3 September, 2015 By in Nintex, sharepoint Tags: , , , , , 5 Comments
Hide the ribbon on a Nintex form

I needed to hide the ribbon on a specific Nintex form.  Yes, the client had heard my arguments about why you should keep the ribbon and decided to remove the ribbon regardless. Removing the ribbon from that one form did not turn out to be quite as straight-forward as I expected.

The normal SharePoint CSS code to hide the ribbon is:

#s4-ribbonrow { display: none; }

This will completely hide the ribbon and the space it takes up. Perfect, right?

However, if you add this code to the custom CSS of a Nintex form, you lose the ribbon in the Form Editor. It becomes very difficult to save your changes:

No ribbon in Nintex Forms Designer

As you have not yet saved your changes, you can just refresh the page to remove the new CSS as well as any other changes you may have made.

To correctly hide the ribbon on a form and only affect the form, you need to add the following JavaScript to the form settings:

NWF$("#s4-ribbonrow").hide();

Once you have done that, the form will not have a ribbon but everything else will.

In this case, the form will become the master form for this project. Any forms created from this master form template will automatically have this JavaScript included.

Resources: Nintex Forms – Who looks at the mantle? (Hide the ribbon)

 

5 responses

  1. Hi Hannah,

    Do you know if anything changed in Nintex since you wrote this post? I desparately need to be able to hide the ribbon, but I can’t. I input the “NWF$(“#s4-ribbonrow”).hide();” into the Custom JavaScript of the form, but the ribbon is still there. Please, if you have any ideas, reply to me via email or comment. Thanks!

    • Hey there! I’m sorry, I don’t know – I left the Microsoft world years back and leave this blog up as it’s still helping people out.

    • This code should work to hide the ribbon:

      /Hide Container Ribbon/
      NWF$(document).ready(function()
      {
      NWF$(“#RibbonContainer”).css(“display”,”none”);
      }
      );

  2. You will need to inset this in the Custom JavaScript section (not css):
    //hide ribbon and change margins
    NWF$(“#s4-ribbonrow”).hide();
    //change top margins
    NWF$(‘#formFillerContainer’).css(‘top’, ’20px’);