How to modify width of standart dialog form sharepoint 2010

Kate Ponomareva picture Kate Ponomareva · Jul 9, 2012 · Viewed 9.3k times · Source

Please, help me!

I need to modify width of standart dialog form for adding element into library.

If I click to ribbon button for adding element, form opened with width=402px:

<div class="ms-dlgContent" role="dialog" aria-labelledby="dialogTitleSpan"  tabindex="-1" style="z-index: 1505; display: block; width: 402px; height: 294px; left: 430px; top: 104px; "></div>

If I click to button under all elements of current library, form opened with width=1032px:

<div class="ms-dlgContent" role="dialog" aria-labelledby="dialogTitleSpan" tabindex="-1" style="z-index: 1505; display: block; width: 1032px; height: 267px; left: 115px; top: 273px; "></div>

I can't understand, what I need to do for opening in the second case form with width=402px.

Maybe need enter some code in Upload.aspx? (this form generate automatically) I guess, this page open for creating new element, because schema.xml for my list definition contain this code:

<Forms>
  <Form Type="DisplayForm" SetupPath="pages\form.aspx" Url="Forms/DispForm.aspx" WebPartZoneID="Main" />
  <Form Type="EditForm" SetupPath="pages\form.aspx" Url="Forms/EditForm.aspx" WebPartZoneID="Main" />
  <Form Type="NewForm" Url="Forms/Upload.aspx" WebPartZoneID="Main" />
</Forms>

But if modify this part of Upload.aspx (add .ms-dglContent class), it doesn't help me:

<asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server">
<style type="text/css">
.ms-bodyareaframe {
   padding: 8px;
   border: none;
}
.ms-dglContent {
   width:402px!important;
}
</style>
</asp:Content>

If I modify css files:

.ms-dglContent {width:402px!important;}

it modify all dialog forms, but in my case is unacceptable.

I would be grateful for any attempt to help!

Answer

Hor&#225;k Jan picture Horák Jan · Oct 27, 2012

Modal dialog div is place dynamically into DOM. If want to modify dialog dimensions try to find call like SP.UI.ModalDialog...

var dialogCallbackToMainSite = function (dialogResult, returnValue) {

    if(returnValue == 'someValue') {
    }
};

var option = {
    url:record.data.url,
    title:'Task',
    allowMaximize:false,
    showClose:false,
    autoSize:false,

    width: 800,
    height: 600,

    dialogReturnValueCallback:dialogCallbackToMainSite
};

SP.UI.ModalDialog.showModalDialog(option);

BTW if you need to vertical center dialog in situation when ribbon scroll with page and it´s static position is disable follow this solution http://generation12.wordpress.com/2011/10/25/floating-the-sp-ui-modaldialog/