SharePoint 2010 modal dialog Height width issues

Question

Hello I am new to SharePoint Designing. i had customize master page with fixed width layout. but when i deal with modal dialog box it show with no height and width show only scroll (please see screen). what i done wrong? i had used "s4-notdlg" at proper location. In the master-page. please let me know if any one face same issues and its solutions. its very critical for me now...!

 

Answer 1

The problem is any styles you apply to any containers that surround the main body area are still be applied (since they don't have s4-notdlg). What I usually do is something like this in my CSS (.customPageWidth is whatever class is surrounding your main content placeholder... you may need more than one):

.ms-dialog .customPageWidth {
 margin-left:0 !important;
 margin-right:0 !important;
 min-height:0 !important;
 min-width:0 !important;
 width:auto !important;
 height:auto !important;
 background-color: white !important;
 background-image: none !important;
 padding: 0px !important;
 overflow:inherit;
}

---

Randy Drisgill - MVP SharePoint Server
SharePoint911 Branding and Design Services
My Blog: http://blog.drisgill.com
Wrox: Professional SharePoint 2010 Branding and UI Design

Answer 2

Thanks again Randy. It works..!!  thank you very much.

Answer 3

Hi Randy,

I have created a custom master page and here is the outcome: Can you please help me with this? This is the list item opened in modal dialog box.



Answer 4

Just copy and paste the below content in your files. That's it. 

Please refer to know get clear idea:

http://sharepointquicksolutions.blogspot.in/2012/06/sharepoint-workflows-interview.html

html{
    background-color:#55A0A7;
    overflow/**/:auto;   
}
body.v4master {
    width:1024px;
    margin:0px auto;
    overflow:visible;
    background-color: transparent !important;
}
.ms-dialog body.v4master {
    height: 100%;
    overflow: hidden;
    width: 100%;
}
body #s4-workspace {
    left: 0;
    overflow: auto !important;
    overflow/**/: visible !important;
    position: relative;
    width: 100% !important;
    display:table;
    border-spacing:0px;
}
.ms-dialog body #s4-workspace{
    display:block !important;
    overflow/**/: auto !important;
}

Please refer to know get clear idea:

http://sharepointquicksolutions.blogspot.in/2012/06/sharepoint-workflows-interview.html