sharepoint 2010 modal dialog scrollbars issue

Recently I have created a custom master page for our new SharePoint server, First I have noticed that when the page loads, SharePoint runs a java script function and sets the width of the page.

It is searching for the div tag with Id #s4-workspace and if it finds one with this id, sets its width to fit the content. So I have added a class s4-nosetwidth. If we add this class to s4-workspace, SharePoint won’t set its width.

But very first time when I tried to create fixed width master page, I have faced so many issues with scroll bars and SharePoint modal dialog windows are not opening correctly. They are opening either with in small height and added scroll bars or opening in fixed width and height without scroll bars.

Mainly IE7 adding its own scroll bar to body  , as the page is fixed width so the scroll bar that is showing in the middle of the page is looking pretty ugly. I have fixed all these issues and below am the styling.

html{

    background-color:#55A0A7;

    overflow/**/:auto;   

}

body.v4master {

    width:1024px;

    margin:0px auto;

    overflow:visible;

    background-color: transparent !important;

}

.ms-dialog body.v4master {

    height: 100%;

    overflow: hidden;

    width: 100%;

}

body #s4-workspace {

    left: 0;

    overflow: auto !important;

    overflow/**/: visible !important;

    position: relative;

    width: 100% !important;

    display:table;

    border-spacing:0px;

}

.ms-dialog body #s4-workspace{

    display:block !important;

    overflow/**/: auto !important;

}

Alignment issue in Picture library slide show webpart (sharepoint 2010)

Solution 1

I got the solution guys…
The picture library webpart uses the css classes in corev4.css in sharepoint 2010. The web part uses “.ms-WPBody” css class for styling. I over wrote this class in my custom style sheet as “.ms-WPBody.noindex” and gave my custom settings in the properties.

And thats it, my webpart aligned to the center of the page with my custom settings.

• Marked As Answer byP6520Tuesday, August 10, 2010 11:24 PM

You can find “.ms-WPBody” class in corev4.css. When I look into the webpart through the developer tools in internet explorer, O came to know that, the webpart style is based on “.ms-WPBody.noindex” css class. So, I wrote my custom css using this class name as follows:

.ms-WPBody.noindex{
 font-size:8pt;
 font-family:"Segoe UI" !important;
}

.ms-WPBody.noindex table{
 font-size:1em;
 width:100% !important;
 height:100% !important;

}

.ms-WPBody.noindex td{
 font-size:10pt;
 font-family:"Segoe UI" !important;
 width:100% !important;
 height:200px !important;
 margin-left:auto !important;margin-right:auto !important;
/* text-align:center !important;*/
}

.ms-WPBody.noindex td div{
 height:auto !important;
 width:100% !important;
 text-align:center !important;
 display:block !important;;
}

.ms-WPBody.noindex td div span{
 width:100% !important;
}

.ms-WPBody.noindex td img{
 height:100% !important;
 width:100% !important;
}

Also, I am attaching the document with the images before and after applying css classes.
http://www.sendspace.com/file/r4meyx

I hope this clears the confusion. If I am wrong, please correct me.

Solution 2

<script>

    $(document).ready(function() {
    var divList = $("div[id^='MSOPictureLibrarySlideshowWebPart']");
    var currImage= $("img[id$='curr']");
    divList.height('100%');
    divList.width('100%');
    currImage.height('100%');
    currImage.width('100%');
    });</script>