Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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.

Dialog

Your help would be very much appreciated.

share|improve this question
    
maybe you should create your modal with "showMaximized=true" –  Steve B Jun 18 '12 at 13:55
add comment

4 Answers

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

share|improve this answer
    
Mike, Thank You For your comment. Do i apply s4-notdlg to the content placeholders? or how does this work. –  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
add comment

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,

.s4-pr
{
 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
{
 width:100%;
}
share|improve this answer
add comment

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);
}
share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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