Making a "dialog" modal box wider - for a form - beginner

Question

I am just learning SharePoint now, thus I don't know how do anything advanced such as modifying the CSS/JS/JQuery to change the width.

Essentially, I am trying to modify the width of the dialog that pop ups. I have a questionnaire form - and due to the nature of the responses the form is pretty wide - thus it gets wider than the dialog box, and it looks ugly and is not usable to scroll.

It seems the dialog box has much more room (since its centered) to be increased in size.

Is there a way to increase the width of it?

I have made a screenshot to show what I'm referencing - I hope I am making my issue clear. See in the picture how there is much more room to make the dialog box wider - how would I go about doing this? (For the record, please don't skip over steps - if it's something such as easy as copying a line of code please tell me the steps of how I would go about doing so).

Thanks!

Answer 1

The page you need to call in the Modal dialog could be invoked through JavaScript. Based on your requirement you could either pass a result back to the parent(calling) page or just close the dialog. Importantly for you, you can specify attributes on the Modal dialog such as height, width, title etc.. as parameters in the JavaScript. For an example:

    var options = {
        url: 'url of the page to be called',
        title: "Modal Dialog Title",
        showClose: true,
        width: 800,
        height: 600,
        allowMaximize: false
    };

This post will give a good understanding on the parameters. There's another post explaining ways to close dialogs and pass back values.

Answer 2

Do not do this for OOTB / application pages . If you change the OOTB sharepoint files , all the modal popups for list/doc lib would be affected by the changes and not advisable .

Please follow the blog to make changes only to custom page if you have , where you need the popup size to be changed by APIs by parameters .

PS: http://alinimer.wordpress.com/2013/02/25/open-pages-and-forms-in-modal-dialog-for-sharepoint-2013/