Branding SharePoint 2013 Tricks – 6 – Hiding Elements in Dialogs

SharePoint 2013 allows us to hide site elements in dialogs just as we could in SharePoint 2010. Just be aware that the class we add to such elements we wish to hide has changed.

Hide Element in Dialog - Error

The Problem:

In a custom branding project you add a new container element, such as a new header, navigation block or footer to your System (default) Master Page. This element then appears in dialogs even through we do not want it to.

Solution:

In SharePoint 2010 we would add the following class to an HTML block we want hidden in dialogs.

1
s4-notdlg

such as

1
2
3
<div id="custom-header" class="s4-notdlg">
<!—the rest of the header-->
</div>

In SharePoint 2013 we use the same method, just a different class, ms-dialogHidden.

1
2
3
<div id="custom-header" class="ms-dialogHidden">
<!—the rest of the header-->
</div>

Hide Element in Dialog - SPD Code

You can add the ms-dialogHidden class to any HTML element in your Master Pages, Page Layouts, or even content referenced by Master Pages in Webparts let’s say that you want hidden in a dialog.

Hide Element in Dialog - Good

See of all of my SharePoint 2013 Branding Tricks and Discoveries.

Comments

  1. I enjoy, reesult in I discovered exactly
    what I used to be having a look for. You’ve ended my four
    day long hunt! Good Bless yyou man. Have a great day. Bye

  2. Perfect, thank you! works great

  3. Great and simple way to leverage built in functionality. I’m using ajax to pull an element into specific sites that all use the same master page, and wanted to remove the element from dialogs. This does the trick.

  4. I placed a background image in the s4-workspace and it is appearing in the popup, when iam using ms-dialogHidden it making to disappear every thing in the popup.
    How to solve this problem

    • That makes sense as that css class will tell the entire w4-workspace to hide itself.

      you could try something like:
      .ms-dialog #s4-workspace {
      background-image: none;
      }

      At least I believe that is it. There is a class similar to “.ms-dialog” that is included in the or tag when the content being loaded is in a dialog.

  5. Thank you for that! Can confirm, it works with SP2016!

  6. Its a great post … saved a lot of time..

  7. Joseph Velliah says:

    Will this work in the below scenario?

    Global Navigation Area

    Style for navigation class

    .navigation {
    background: #58676d;
    padding: 10px 20px;
    font-family: calibri, sans serif;
    font-weight:bold;
    font-size: 14px;
    position: relative;
    z-index: 2001;
    border-bottom: 1px solid #fff;
    }

    • Joseph Velliah says:

      We fixed this issue with the following css class

      .navigation {
      background: #58676d;
      padding: 10px 20px;
      font-family: calibri, sans serif;
      font-weight:bold;
      font-size: 14px;
      position: relative;
      z-index: 999;
      border-bottom: 1px solid #fff;
      }

      REPLY

      • Hi Joseph,

        I am glad to hear you were able to fix your issue, but I am confused as to what the issue was. Do you have a navigation bar that you do not want to appear in a SP dialog?

        Eric

  8. Thanks a lot. This saved me a lot of time!!!

  9. Awesome ! , Thanks its works on online version

  10. Hi eric,

    I have been reading your post froma while and I am always geeting very good solutions

    Currently, i am stuck with an issue and looking for your help.

    I have converted a HTML5 page to sharepoint 2013 master page using design manager.
    Everything is ok, but only first section appears on the page the remaining are hidden.
    For example, i have top navigation, header, services, portfolio, footer etc on the master page.
    only header appears rest all are hidden.
    if i see the html from browser their is an inline code having visibility = hidden. but this code is no where on the actual master page.

    Do you have nay idea about this issue.
    Let me know if you need more details.

    Thanks,
    Maddy

    • Hi Maddy,

      I am sorry to hear about the troubles you are having with your Master Page. Without seeing the page as rendered in a browser, it is very difficult to say. Likely some JS is setting the visibility to hidden, but hard to say. What is the ID or class of the div that is being hidden? In your browser developer toolbar, what happens if you override the visibility to make it “visible”?

      Eric

  11. jonathan says:

    I’m having the problem stated above. In the “Add Document” popup window the header and navigation appear. How do I hide theses elements. I don’t know how to access the popup window code. Thanks

    • I assume you are using a custom master page. In that case your header and navigation found in your system (default) master page need a specific class added to their parent containers. There is no need to actually access the popup window code, just your custom system master page. You will need to add the css class, “ms-dialogHidden” to the container elements of your header and navigation.

      • Hello, I have checked my master page header is not found. when I need to ms-dialogHidden. I just found side navigation is this class is already there.

  12. nice one thanks..

  13. thanks a lot. . .

Speak Your Mind

*