We are trying to use a grid design on a master page in SharePoint 2013 / Office 365. This will imitate the default title bar + side nav bar but with a third party framework. The reason I am asking here is because it seems to be framework independent for our issue. Basically we only want the ContentPlaceHolderMain to show in a dialog as per normal. But, with a grid framework we have a column for the side nav bar and a column for the content placeholder within the same row. When we add the ns-dialogHidden to the side nav it hides all the data but the page width is still taken up in the dialog.

Any ideas of how to get around this? A simple way would be to test if the "page" is within a dialog box and write Sass code to modify the columns. I did not see a way to do this though.


I am not sure if it might help you, but the root HTML tag in SharePoint 2013 contains a class ms-dialog when the page is opened as a pop-up:

enter image description here

This might help you to apply certain styles only to the pages that are opened in dialog boxes in the CSS like so:

.ms-dialog .myNavBar{
| improve this answer | |
  • the ms-dialogHidden takes care of hidding the contents of the div in our grid (we're using foundation and small-2 columns for this one) but the column space is still taken up. Are you suggesting something similar to .ms-dialog .small-2 colums {display:none;} ? For production we're going to play with Sass and not use the default class names of course. – tanwedar Jul 8 '14 at 18:00
  • I think you should not avoid using standard class names unless you want to remove a link to standard core.css file from your master page. Can you go to built-in browser's developer tools via F12 and click on the big white area that is being taken up? I think you've hidden your column but something else is taking up the space. You can even post a post a few screenshots so that we can understand what's your problem specifically. – Denis Molodtsov Jul 8 '14 at 18:13
  • Here's a link to an example: imgur.com/a/3dIzt As you can see, in the dialog part the content of the green column is gone but the spacing is still there. If it's not easy to tell, the left side of the red bg should be much further to the left. edit: For ease of comparison imgur.com/aUBGTSn – tanwedar Jul 8 '14 at 20:47
  • Well, that's a very easy thing to fix, but you need to inspect the HTML of the white area on the left with your built in Web Developer Tools. When you identify the problem, you can write some CSS that only targets dialog boxes. In order to fix this problem and NOT break your pages that are not displayed in the dialog boxes I suggest you use the example I've included in the answer. For Instance. Suppose your white area to to the left is margin-left:90px for the div with class='someDiv'. Then you will have to include CSS that looks like so: .ms-dialog .someDiv {margin-left:0 !important } – Denis Molodtsov Jul 8 '14 at 21:00
  • Basically, you need to show your problem to a guy that knows some CSS and HTML. I'm sure he will look and tell you how to fix it within a minute. This problem is pretty hard to tackle via the forums. – Denis Molodtsov Jul 8 '14 at 21:03

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.