SharePoint 2010 and Styling Dialog Windows for Responsive Sites

As you start to build responsive SharePoint 2010 sites, you will likely run into a hurdle with dialog windows.  Most responsive websites rely on CSS media queries to style the site according to the size of the viewport.  So, when you only have a 180 pixels for example to work with, you should style your content accordingly.

The problem with this core concept in SharePoint 2010 is that the dialog windows also share the master page which also happens to be where you are likely declaring your style sheets (including your media queries).  So essentially what happens is when your dialog window pops up, the viewport of the dialog window is pretty small and the site responds, changing the styles you have set  around the 500 pixel range.  Because the original page is still behind the dialog also using the same master page, it too responds and it just looks plain ugly.

Luckily, Microsoft added a class to the HTML tag of these dialog windows:

  • In the case of a list form, class=ms-dialog is added to the HTML tag
  • In the case of an error message, the class=ms-dialog and ms-dialog-nr are added to the HTML tag

This will allow you to build your classes by following the DOM from the HTML down to your wrapper/container.

For example, if you had a container called .custom-wrapper { width:960px; } you can experient with variations of html.ms-dialog custom-wrapper {width:100%} in your style sheet.  It will take a little tweaking, but hopefully you should be able to get it.

Shane

Shane Perran Responsive Design, User Experience and SharePoint SME

You may also like...

I would love to hear from you.

%d bloggers like this: