SharePoint 2010 incorrect popup dialog size

Question

I'm in the process of updating the look and feel of a SharePoint 2007 web application to SharePoint 2010.

The popup dialog boxes for new items, edit, etc. have an inline style for fixed width and height, which surprised me. As you can see below, div.ms-dlgContent, .ms-dlgBorder, .ms-dlgTitle and iframe.ms-dlgFrame all have a fixed width set inline.

<div class="ms-dlgContent" role="dialog" aria-labelledby="dialogTitleSpan" tabindex="-1" style="z-index: 1505; display: block; width: 502px; height: 518px; left: 699.5px; top: 10px;">
  <div class="ms-dlgBorder" style="width: 500px; height: 516px;">
    <div class="ms-dlgTitle" style="width: 500px;">...</div>
    <div class="ms-dlgFrameContainer">
      <iframe id="GUID" class="ms-dlgFrame" src="/_layouts/listform.aspx?ListId=GUID" frameborder="0" style="width: 500px; height=484px;">...</iframe>
    </div>
  </div>
</div>

I can access and update the divs and iframe with jquery in the browser developer tools with:

$('.ms-dlgContent').css('width','');
$('.ms-dlgBorder').css('width','');
$('.ms-dlgTitle').css('width','');
$('.ms-dlgFrame').width('');

But I don't think this is the appropriate method of correcting the issue. I should be trying to get SharePoint 2010 to properly size the dialog when it opens.

Since the styles are inline, overriding it with my custom css file will not work.

I've tried putting the jquery in my masterpage and tried updating the listform.aspx page with document.ready(...) but of course, neither worked (as I expected).

Can anyone help me with either how do I get SharePoint to properly size the popup dialog with css (preferred) or where I can put my jquery to resize the popup dialog?

Thanks in advance.

LZ_MSFT LZ_MSFT · Accepted Answer · 2020-01-20T02:18:59

We can use CSS !important to override the default CSS style. The following style for your reference.

<style type="text/css">
.ms-dlgContent{
    width:800px !important;
    height:500px !important;
    top:120px !important;
}
.ms-dlgBorder{
    width:800px !important;
    height:500px !important;
}
.ms-dlgTitle{
    width:800px !important;
}
.ms-dlgFrameContainer{
    width:800px !important;
    height:500px !important;
}
.ms-dlgFrame{
    width:800px !important;
    height:497px !important;
}
</style>

If you don't want to use the default popup dialog in list, we can go to List Settings->Advanced Settings and set "Launch forms in a dialog?" to "No".

SharePoint 2010 incorrect popup dialog size

1 Answers