0

SharePoint 2013 uses iframes for the popups which causes issues when using a modified masterpage. The iframe has a class of .ms-dlgFrame and the element I am trying to hide is .navbar. I have tried using CSS with,

.ms-dlgFrame .navbar {
  display: none;
}

but it did not work. Using javascipt I am able to tell if the iframe class exists but when I try to hide the navbar it hides the navbar on the main page instead of the popup. The javascript I am using is,

if (document.getElementsByClassName('ms-dlgFrame').length) {
    document.getElementsByClassName('navbar')[0].style.Display='none';
}

How can I hide the navbar on the popup but not the main page?

enter image description here

Grady D
  • 1,889
  • 6
  • 30
  • 61
  • 3
    you cannot affect elements inside an iframe from outside the iframe. That's one of the reasons to use an iframe: it lives completely isolated from the owning context. – Mike 'Pomax' Kamermans Jul 18 '14 at 18:39
  • 3
    That's not 100% true, if the iframe is on the same domain as the parent document you can. You need to do through document.frames to access the iframe content as it is a separate document. – Diodeus - James MacFarlane Jul 18 '14 at 18:41
  • I have added a picture of part of the source I am dealing with. @Diodeus it is all on the same domain and is actually built into sharepoint. – Grady D Jul 18 '14 at 18:44

1 Answers1

1

The iframe is a separate document, so the iframe content cannot be treated as a child element, as far as CSS goes. You need to address the iframe content directly.

This answer talks about how to do this. Just give your iframe an ID so the jQuery selector will work.

$("#iFrame").contents().find("#someDiv").removeClass("hidden");
Community
  • 1
  • 1
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176