How to modify width of standart dialog form sharepoint 2010

9.3k Views Asked by At

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!

2

There are 2 best solutions below

0
On

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/

1
On

I'm not used to working in Sharepoint, but it seems to me that the function that triggers the dialog to be displayed is provided different values on measurement variables somehow, so yes, you probably need to change your code somewhere. Try searching your entire solution for "1032" - maybe that width measurement is assigned to a variable somewhere.

If you want both of the dialogs to look the same and can't find where they are given their measurements (though, I strongly recommend that you try that first), you could perhaps override the inline-styling by using !important, like so:

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