I am working on SharePoint 2010 project with custom master page. I am having this problem where contents on my modal dialog box is cut off (see below).

I have spent hours googling and using firebug and IE Developer Tools to fix it with no results.


Your help would be very much appreciated.

  • maybe you should create your modal with "showMaximized=true" – Steve B Jun 18 '12 at 13:55

If you issue is that the master page is being applied to your dialog boxes, I was having a similar issue. I had images that were apart of the master page and they would 'push down' all the content, so the dialog box would be the size it should be based on the elements in it, but then because of the images, not everything could show on the screen.

I fixed this by adding the css class "s4-notdlg" to any element on the master page I didn't care to show up in the dialog boxes, which obviously based on the name prevents any items with that class from showing up in the dialog box.

Source: http://blog.drisgill.com/2009/11/sp2010-branding-tip-2-custom-master.html


  • Mike, Thank You For your comment. Do i apply s4-notdlg to the content placeholders? or how does this work. – allegro octopus Mar 23 '12 at 13:41
  • I believe you apply the class to whatever object you don't want to appear... not sure if it has to be on the content placeholder or what. When I was having this issue, the masterpage contained a header that was defined by a table that kept showing up and pushing things down, the table tag now looks like <table width="100%" class="s4-notdlg"> – Mike Kshymensky Mar 23 '12 at 18:00

Obviously its a width issue. There is a width set in your master page either for the body, s4-ribbonrow or s4-workspace or s4-pr some other custom class.

You need to avoid this width setting in your dialog boxes. Add .ms-dialog class and customize for avoiding this in dialog boxes.

For eg:-

If your css file has custom width on s4-pr, it should be,

 width :800px;

Add the class with an ms-dialog to control the same in dialog box in addition to the existing one.

.ms-dialog .s4-pr

We had this problem on a custom sharepoint site and fixed it by adding a min-width.

This is not the best solution but it works:

.ms-dialog BODY #s4-bodyContainer
    width: auto !important;
    min-width: 660px !important;
    padding: 3px;
.ms-dialog BODY .no-menu#MSO_ContentTable { padding: 0px; }

When I have some time, I will dig deep into how sharepoint tries to calculate this width, and hopefully find a better fix.

If you wish to investigate it yourself look on line 554 in sp.ui.dialog.debug.js, you will find this code, and it will be really hard to read, but give it a go.

autoSize: function() {ULSTYE:;
    var $v_0 = 0;
    var $v_1 = 0;
    this.$Q_0((SP.ScriptUtility.isNullOrUndefined(this.$G_0.width)) ? 500 : this.$G_0.width, (SP.ScriptUtility.isNullOrUndefined(this.$G_0.height)) ? 20 : this.$G_0.height);
    if (this.$0_0) {
        try {
            var $v_2 = this.$0_0.contentWindow.document;
            var $v_3 = $v_2.getElementById('s4-ribbonrow');
            var $v_4 = $v_2.getElementById('s4-workspace');
            if ($v_3 && $v_4) {
                var $v_5 = $v_4.style;
                var $v_6 = $v_3.style;
                var $v_7 = $v_5.width;
                var $v_8 = $v_5.height;
                var $v_9 = $v_6.width;
                var $v_A = $v_6.height;
                $v_5.width = '';
                $v_5.height = '';
                $v_6.width = '';
                $v_6.height = '';
                $v_0 = Math.max($v_3.offsetWidth, $v_4.scrollWidth);
                $v_1 = $v_3.offsetHeight + $v_4.scrollHeight;
                $v_5.width = $v_7;
                $v_5.height = $v_8;
                $v_6.width = $v_9;
                $v_6.height = $v_A;
            else {
                var $v_B = $v_2.getElementById('ms-notdlgautosize');
                if ($v_B) {
                    $v_0 = parseInt(SP.Res.defaultDialogWidth);
                    $v_1 = parseInt(SP.Res.defaultDialogHeight);
                else {
                    $v_0 = this.$0_0.contentWindow.document.body.scrollWidth;
                    $v_1 = this.$0_0.contentWindow.document.body.scrollHeight;
        catch ($$e_2_0) {
    else if (this.$E_0) {
        $v_0 = this.$E_0.scrollWidth;
        $v_1 = this.$E_0.scrollHeight;
    $v_0 += SP.UI.Dialog.$1b_0();
    $v_1 += SP.UI.Dialog.$1b_0();
    if ($v_0 < 50) {
        $v_0 = parseInt(SP.Res.defaultDialogWidth);
    if ($v_1 < 20) {
        $v_1 = parseInt(SP.Res.defaultDialogHeight);
    if (SP.ScriptUtility.isNullOrUndefined(this.$G_0.height)) {
        this.$A_0 = $v_1;
    if (SP.ScriptUtility.isNullOrUndefined(this.$G_0.width)) {
        this.$B_0 = $v_0;
    this.$Q_0(this.$B_0, this.$A_0);

I've seen this happen when there is a fixed-width in the mix. You might want to check the CSS width of the elements surrounding you main content placeholder.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.