how to increase size of modal popup which comes up when we click on an List item?

2011-07-12

Question

_{Tuesday, July 12, 2011 6:38 AM | 1 vote}

All replies (16)

_{Tuesday, July 19, 2011 9:53 AM ✅Answered | 1 vote}

What do you want to increase? Width or Height?

If it's width is simple:

- Open the list you want to change.

- On ribbon, click "List" or "Library" separator.

- click "Form Web Part" and choose the form you want to change

- then you have to "edit page" and "add new web part" -> HTML Form Web Part.

- Edit webpart -> source code...

- replace the code with this one:

<table width='1000'>
<tr><td width='100%'></td></tr>
</table>

replace '1000' with your value.

you're god to go.
To change the height, I'll leave to your imagination...

_{Tuesday, July 12, 2011 11:47 AM}

please help me microdoft.!

_{Tuesday, July 12, 2011 11:55 AM}

I had just increased it but this is for development not the OOB one... but take a look..

function OpenDialog() {

var options = SP.UI.$create_DialogOptions();

options.width = 600;

options.height = 300;

SP.UI.ModalDialog.showModalDialog(options);

}

Mai Omar Desouki | Software Consultant | Infusion | MCP, MCTS, MCPD, MCITP, MCT Microsoft Certified Trainer & MCC Microsoft Community Contributor | Email: [email protected]

_{Tuesday, July 12, 2011 12:31 PM}

hi Mai Omar,

what you have given is to open an url in a new popup.

my question is : how to increase the SIZE of MODAL POPUP that displays the DISPLAY FORM which appears when you click on 'add new items' button inside a list.

i tried to change the css by using:-

.ms-dialog {
width: 1200px;
margin: auto;
}

_{Wednesday, July 13, 2011 11:14 AM}

.ms-dialog {
width: 1200px;
margin: auto;
}

the above code upadtes modals all over the site.

it also causes display issues in few modal popups like Configure Silverlight webpart(and other similar modals which comeup).

it basically spoils the popups, overall the site.

if i want to target modal popup of specific list(to increase its width and height) then is it possible?

_{Thursday, July 14, 2011 7:07 AM}

This won't only change all over site but also to the farm as well.. for web applications in this farm.

Well... in my opinion, create your own and give the width you want.

But why you want to change the width???? do you see any scrolling? because Microsoft did as good as it can be because it really fits.

Mai Omar Desouki | Software Consultant | Infusion | MCP, MCTS, MCPD, MCITP, MCT Microsoft Certified Trainer & MCC Microsoft Community Contributor | Email: [email protected]

_{Thursday, July 14, 2011 7:59 AM}

the users of this system in my Company want bigger forms as they use a 19inch LCD screen.

we have completely modified the forms which sharepoint provides and instead used custom webparts.

so i want to target specific lists and increase the width of the modal popups.

i am using javascript to do this on click of edit/add new items via my webparts.

but, i donot know how to set the width on click of list item..

so, i had to create custom css for MS-DIALOG..but as you say that effects the entire farm which i donot want to happen.

would appreciate a work-around for this as i have been trying to find one also, since few days.

this could be the solution:

open the allitems.aspx page of the List and then write inline css for MS-DIALOG for this particular page...

so that all modal things on this page open with a new big width.

again, the issue here is that I donot know where to put the STYLE TAG for incline css in the page.

so, can i paste my css inside allItems.aspx under <content place holder main>???

_{Saturday, July 16, 2011 6:26 AM}

wts up no replies?? microsoft?

_{Sunday, July 17, 2011 10:59 PM}

Hi ogasim07

You can do this by overriding the default behaviour of SharePoint. Here is a high level approach which may work.

1.Check the View Source and find out which URL is being called on the click of Edit Form Button.

...2.Override the behaviour of this button, or create a new one (using a feature)

3.And in the new definition create a JavaScript pop up call (as done in OOB behaviour) with the required height and width.

Guess it works....And the CSS approach which you followed should also work. Not sure why thats getting distorted in IE.

If a post answers your question, please click "Mark As Answer" on that post and "Mark as Helpful".

_{Monday, July 18, 2011 4:46 AM}

when ui seee the source.. 1 thing i can make out it that the css and url is generated via some XML thing. so i have no idea how to go ahead and modify the XML...

_{Monday, July 18, 2011 9:26 AM}

who are you? i feel that i get more replies from spam than microsoft these days,..

_{Monday, July 18, 2011 11:43 AM}

You mentioned you using custom webpart to show list items if I am correct, so you must have custom javascript to open modal dialogs. When sharepoint opens the dialog you can override the diloag width and height by specifying in options.

 var options = {
       url: '<URL>',
options.width = 100;
options.height = 250;
};       
SP.UI.ModalDialog.showModalDialog(options);" />

_{Monday, July 18, 2011 11:47 AM}

i am not using any custom webpart.

i am talking about the AllItems.aspx of List which displays all items.

how do i increase the width and height of modal popup which comes up on click of 'Add New Items' and List Item on this page??

_{Tuesday, July 19, 2011 7:26 AM}

microsoft guys what do u have to say?

_{Tuesday, July 19, 2011 11:13 AM}

yes tats it.. it worked.. thanks so much for the solution @Bruno

but now, i have to do this for all lists on my Site...

_{Thursday, September 15, 2016 12:41 AM}

THANK YOU BRUNO2007

ok so I struggled with all kinds of stuff until I came BACK to this post. My issue was the dialog / modal popup window was too small.

a link in a list was using the <a onclick="OpenPopUpPage code... which is embedded in some JavaScript include that I could not edit.

I tried to oerwite the CSS for class="ms-dlgContent", but it would not work.

Here is what I ended up doing.

Click the list you want to open in a larger modal / dialog window.

Click FORM Web parts In the ribbon (in the customize list section label)

Choose "default display form"

INsert a new HTML form webpart. Edit the html webpart source code... enter.

close and click apply.

class="ms-dlgContent

Click the list you want to open in a larger modal / dialog window.

Click FORM Web parts In the ribbon (in the customize list section label)

Choose default display form

Edit the html webpart

</table>

Share via

how to increase size of modal popup which comes up when we click on an List item?

Question

All replies (16)

Additional resources